子元素浮动后脱离了标准文档流,它的布局也就不再遵循标准文档流的规则, 多个浮动元素在一起的时候就会随着窗口的变化而变化,也就失去了稳定的布局,而父元素还是会遵循标准文档流 的规则,从而产生冲突。
1.清除浮动
方法一:创建clearfix类,在浮动元素的父级添加这个类(触发BFC机制)
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
使用
<div class="clearfix">
<div style="float:left">11</div>
<div style="float:left">22</div>
</div>
方法二:隔墙法
.cl{
clear:both;
}
.h10{
height:10px;
}
外墙法:
在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。
墙用自己的身体当做了间隙。内墙法好用,但是第一个div,还是没有高度。
<div style="float:left">11</div>
<div class="cl h10">22</div>
<div style="float:left">22</div>
内墙法:
内墙法的优点就是,不仅仅能够让后部分浮动的div不去追前部分的div了,并且能把父div撑出高度。这样,这个父div的背景、边框就能够通过内墙div的高度来撑开了。
<div style="float:left">11
<div class="cl h10">22</div>
</div>
<div style="float:left">22</div>
方法三:overflow:hidden
<div style="overflow:hidden">
<div style="float:left">11</div>
<div style="float:left">22</div>
</div>
这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。
我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。
总结
通过上面的例子,我们不难发现清除浮动的方法可以分成两类:
一是有高度的父级能关住浮动,而实际工作中不能给父亲设置高度,父亲的高度是变化的,是子元素高度撑起来的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素,方法一就是这么做的。