清理浮动两种方式
- 利用 clear属性，清除浮动
- 使父容器形成BFC
考虑下列情景：
html:
<div class = 'outer'>
<div class= 'inner'>
第1个div
</div>
<div class='inner'>
第2个div
</div>
<div class='inner'>
第3个div
</div>
</div>
css:
.outer{
padding:10px 10px;
border:solid 1px #a33;
}
.inner{
width: 30%;
margin-left:5px;
text-align: center;
background-color:rgb(60,179,113);
float:left;
}
希望是这样：
实际上却是这样：
为什么会这样呢？
在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。
解决办法
1. 在浮动元素新增一个非浮动元素用来清楚浮动
<div class = 'outer'>
<div class= 'inner'>
第1个div
</div>
<div class='inner'>
第2个div
</div>
<div class='inner'>
第3个div
</div>
<div style="clear:both;">
</div>
</div>
<b>原理</b>：是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。
<b>优缺点</b>：这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。
2. 父辈见overflow:hidden,激发BFC清楚浮动
<div class = 'outer' style= "overflow:hidden;">
....
<b>原理：</b>BFC可以包含浮动，清除这个父元素中的子元素浮动对页面的影响。
<b>优缺点:</b>一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。
3. 通过CSS语句添加子元素,利用:after伪元素,给父类加新样式。
<div class = 'outer clearfix">
....
.clearfix:after { // "clearfix"是父容器的class名称
content: ""; //"content:"";"是在父容器的结尾处放一个空白
display: block;//是确保这个空白是非浮动的独立区块。
height: 0;
clear: both;
}
.clearfix {
zoom: 1;//:after选择符IE 6不支持,我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性
}
<b>原理：</b>after伪选择符可以在父容器的尾部自动创建一个子元素，不用额外添加一个元素。
<b>使用频率很高</b>
- <b>其它就不介绍了，大同小异。例如：双伪元素清除浮动、浮动的父容器等。</b>
附录：BFC和hasLayout简单介绍
<b>BFC:</b>就是block formatting context的缩写，中文就是“块级格式化上下文”的意思。它有三个特性：
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠.
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。BFC不会重叠浮动元素
BFC可以包含浮动
<b>触发BFC的情形</b>
- float的值不为none
- position的值不为static或者relative
- display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
- overflow的值不为visible
<b>hasLayout:</b>我们知道在IE6、7内有个hasLayout的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。
<b>看看怎么使元素hasLayout为true.</b>
- position: absolute
- float: left|right
- display: inline-block
- width: 除 “auto” 外的任意值
- height: 除 “auto” 外的任意值
- zoom: 除 “normal” 外的任意值
- writing-mode: tb-rl
<b>简单介绍这么多，细节可自行Google。</b>
