BFC(块格式化上下文)到底是什么
IFE 2019年09月07日 分类： 前端知识体系 标签： HTML/CSS 浏览量： 3662
元素的显示模式 display，分为 块级元素、行内元素、行内块元素 ，其实，它还有很多其他显示模式。
不是所有的元素模式都能产生BFC，常见的： display 属性为 block, list-item, table 的元素，会产生BFC. 这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。 注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。
BFC 有着具体的布局特性：盒子模型。
怎样触发才会产生BFC，从而创造这个封闭的环境呢？ 常见的，要给这些元素添加如下属性就可以触发BFC。
- float的值不为none。
- overflow的值为auto,scroll或hidden。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
BFC布局规则特性：
1. 在BFC中，盒子从顶端开始垂直地一个接一个地排列。
2. 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠，不属于同一个BFC的两个相邻盒子的margin不会发生重叠。（一般非BFC区域内的两个相邻盒子的margin也是会发生重叠）
3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)内侧，只是接触不会压住border（对于从右到左的格式来说，则触碰到右边缘）。
4. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
5. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
BFC应用：
清除浮动的通用类语句：
.clearfix { *zoom: 1; } .clearfix:after { content: ''; display: table; clear: both; }
两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）：
.cell { display: table-cell; width: 2000px; *display: inline-block; *width: auto; }
这就是张鑫旭zxx.lib.cssCSS样式库中.cell的由来！BFC的区域不会与float box重叠；一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了出现文字环绕及类似情形。
避免外边距塌陷：
属于同一个BFC的两个相邻Boc的margin会发生重叠，如果相邻兄弟元素不属于同一个BFC，就不会发生margin重叠了；
总结:
1. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。
2. DOM元素的formatting context决定了其中的元素是怎样排列的，BFC是从上往下排列的，IFC是从左往右排列的；
3. 在元素的height属性为auto时，如果该元素形成BFC，则最终高度会包裹其中所有的浮动元素，否则，最终高度不会把浮动元素计算在内；
4. 通过把元素改为BFC或是在元素内末尾插入“in flow”的block-level元素可以达到clearfix的效果，即最终高度包含其中的浮动元素。
参考：
MDN