BFC

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发生叠加；