BFC(格式化上下文)

一、BFC是什么？

初识块级格式化上下文(Block Formatting Contexts)

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

二、哪些元素会生成BFC?

如何触发BFC

满足下面任意一个条件的元素会触发BFC:

根元素或其它包含它的元素
浮动 (元素的 float 不为 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
overflow 的值不为 visible的元素
弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

BFC处理浮动

通常我们清除浮动，方法有几种：

设置空div

在父容器末尾添加空div,并设置clear:both清除浮动。这样很方便，但违背结构与表象分离的原则。

设置overflow

虽然设置其他属性也能引发BFC属性，但会对布局造成一些影响。设置overflow:hidden的影响相对较小，但在子元素的过大时，超出部分会被覆盖掉，设置auto或scroll又会产生滚动条。

:after伪元素

通过为容器添加:after伪元素，并给伪元素设置overflow属性，添加IEhack，实现清除浮动。也是网上使用比较多的方法。

.clearfix{(*zoom: 1;} 
.clearfix:after{content:”;height:0;display:block; clear:both;/overflow:hidden; /*clear,overflow二选其一*/}

IE6、7下的BFC

由于早期IE6、7对于不支持BFC,所以需要通过IEhack解决。在IE6、7中，通过触发hasLayout私有属性实现BFC效果。从使用上看，hasLayout私有属性和BFC触发方式都是通过特有属性触发，IE6、7中大多通过设置zoom:1;触发，zoom用于设置或检索元素缩放比例，值1表示元素实际尺寸，所以设置1不会对元素显示造成影响。

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。