本篇内容主要讲解“CSS同级元素浮动怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS同级元素浮动怎么实现”吧!
成都创新互联是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,微信小程序开发,十多年建站对花箱等多个领域,拥有丰富的网站推广经验。
1.同级浮动
(1)使块级元素在同一行显示(所有要在同一行显示的都要加浮动)
box1
box2
box3
.box1{
border: 2px solid red;
width: 40px;
height:100px;
float:left;
}
.box2{
border: 6px solid black;
width:100px;
height:40px;
float:left;
}
.box3{
border: 12px solid blue;
width:100px;
height:300px;
float:left;
}

(2)使行内元素支持宽和高
.box1{
border: 2px solid red;
width: 40px;
height:100px;
float:left;
}

3.不设宽或高时,宽和高由内容撑开;
hello
.box1{
border: 2px solid red; float:left;
}

4.如果在某个元素上添加浮动,它将脱离标准文档流(文档流是指对象在文档所占的位置),并且向后找没有浮动的元素覆盖在上面(向后浮动),跟前面的元素没有关系。