CSS中的BFC
BFC：block formatting context块级格式化上下文；
BFC 与清除浮动的关系
某些属性值只要出发了BFC，就可以清除浮动
触发BFC的属性
float,除取值为none的情况;
overflow，除取值为visible的情况;
display中的table-cell,table-caption,inline-block属性；
position中的fixed,absolute;
清除浮动的方法
1.在代码片段的最后添加一个空div标签，并给它设置clear:both;样式,解决父级元素的高度塌陷（浮动元素不在文档流中了）问题；
<div class="content">
<div style="float: left;width: 100%;height: 100px;background-color: #ff0;"></div>
<div class="float: right;width: 100%;height: 100px;background-color: #0f0;"></div>
<div class="clear: both"></div>
</div>
缺点：
可维护性差,在页面中创建冗余的元素；
2.给最外层的父元素设置：overflow: hidden;让浮动元素回到容器中
.content {overflow: hidden;}
3.让最外层的父元素也浮动,来清除内部浮动
.content {float: left;}
缺点：
影响页面布局，不推荐；
4.使用CSS伪元素:after，给浮动元素的外层容器添加新的class，在元素的末尾添加一个看不见的块元素，但有占位
.clearfix:after{
content:"."; /* 添加内容 */
display:block;/* 生成的元素以块级元素显示，占满空间 */
height: 0;/* 避免生成的内容破坏原有的布局高度*/
clear:both;/* 清除浮动 */
visibility: hidden;/* 让元素不可见 */
}
.clearfix{zoom:1;/*兼容IE6,7用于触发IE的hasLayout，然后才能清除浮动*/}
5.改进方案
.clearfix:before,.clearfix:after{
content:'';
display:table; /* 匿名的表格单元 */
}
.clearfix:after{clear:both;}
注意：
该方法中加上:before可以防止浏览器顶部的空白崩溃，即是 margin-top与上一个盒子的margin-bottom发生叠加；
