什么是BFC？如何触发BFC

什么是BFC？

BFC(Block formattin context)， 直译：“块级格式化上下文”。在页面上形成一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之亦是。

那些元素具备BFC的条件？

不是所以元素都能产生BFC，w3c规范只有display属性为block，list-item，table的元素，会产生BFC。如：div，h1~h6，p，ul，ol，li等。

如何触发BFC？

具有产生BFC条件，但是触发才能产生BFC，创造封闭的环境。
触发条件：

• float属性不为none;
• position为absolute或fixed;
• display为inline-block，table-cell，table-caption，flex， inline-flex;
• overflow不为visible;

BFC元素的特性

布局规则：

1. 在BFC元素中，里面的元素从顶端开始垂直一个个排列。
2. BFC的元素垂直方向的距离由Margin决定，属于同一个BFC内的两个相邻的元素的margin会发生重叠。
3. BFC的元素不会与浮动的元素产生交集，而是紧贴浮动边缘。
4. 计算BFC高度时候，自然会检测浮动或者定位的盒子高度。
   简而言之，触发了BFC的元素，是一个独立的渲染区域，不受外界干扰，外界也不受其里面的布局干扰。

BFC的主要用途

1. 清楚元素内部浮动。只要把父元素设为BFC就可以清理子元素的浮动。常见的在父元素设置overflow:hidden;
2. 解决外面局合并问题。同属一个BFC的两个盒子的margin会发生重叠，只需要创建不属于一个BFC的盒子就不会发生margin重叠。
3. 制作右侧（左侧）自适应的盒子。普通流元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己封闭上下文。