清除浮动
为什么要清除浮动呢?
一般来说,在网页布局中,我们一般不会写死盒子的高度,如果我们将盒子高度固定了的话,那我们要是想再加内容的话就会超出盒子了,此时就打乱了网页布局,所以说,尽量不写盒子的高度,让盒子的内容来撑开盒子的高度。
但是如果不给盒子的高度(并且想要左右排列时,给其浮动后,元素浮动起来之后不占用文档流,此时会引起下列元素和父元素排列错误),此时涉及BFC准则,总的来说,由于父盒子在很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父盒子高度为0时,就会影响下面的标准流盒子。
清除浮动的本质:就是清除浮动盒子所带来的影响
如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度之后,就不会影响下面的标准流了
方法如下:
策略:闭合浮动(只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子)
方法一:额外标签发(w3c推荐做法)也称隔墙法
方法二:父级元素添加overflow属性
方法三:父级添加after伪元素
方法四:发髻添加双伪元素
方法一:额外标签法
(添加的标签必须是块级元素)
其实就是在最后一个浮动元素后面加上一个盒子(相当于一堵墙)这样该盒子下面的元素就不会在往上顶了,因为已经该盒子已经占用了该标准流的一行(和上面浮动布局的本质相对应看一下)。
eg.
<style>
.son1,.son2
{
.....
float:left;
}
.clrar{
clear:both;
}
<!--清除浮动之后 father2的元素就不会顶上来了,会按照标准流来进行排列-->
</style>
<body>
<div class="father">
<div> class="son1"</div>
<div> class="son2"</div>
<div> class="clear">
<!--类名随意取-->
</div>
</div>
<div class="father2"></div>
</body>
优点:通俗易懂,书写方便
缺点:添加了许多无意义的标签,结构话较差。
方法二:父级添加overflow(以后再详解)
给父级元素添加overflow属性:hidden、auto或scroll
优点:代码简洁
缺点:无法显示溢出来的部分
方法三::after伪元素
它是方法一的升级版,不过是给父级添加(其实就是在父级元素后面添加了一个盒子,再给其设置clear属性)
.clearfix:after
{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
*zoom:1 /*IE 6 7*/
}
该方法照顾了低版本的浏览器,没有增加额外的标签,结构较简单,一般百度、淘宝等都使用的该方法
方法四:双伪元素清除浮动
也是给父盒子添加
在父元素前面和后面分别插入 方法三的升级,这样就完全闭合了
.clearfix:after,
clearfix:before
{
content:"";
display:table;
}
.clear:after
{
clear:both;
}
.clearfix
{
*zoom:1 /*IE 6 7*/
}
//后面将会详细解释table..
小米、腾讯....使用的该方法。