BFC、IFC、FFC的概念和应用

一、 BFC的概念和应用

1. BFC的概念

BFC的全称是 Block Formatting Contexts，块级格式化上下文，是页面中的一块渲染区域，他拥有一套渲染规则，决定内部的子元素如何定位，以及和其他元素的关系和相互作用。说白了就是一个决定如何渲染元素的容器。

2. BFC的渲染规则

1. 内部的块级元素会再垂直方向一个接一个的放置
2. 块级元素垂直方向的距离由margin决定，属于同一个BFC的两个相邻块级元素的margin会发生重叠
3. 对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。
4. BFC的区域不会与浮动元素重叠
   这点是BFC最重要的一点渲染规则，可以用这个规则解决很多布局的问题。
5. BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响。
6. 计算BFC容器的高度时，浮动元素也参与计算。
   这个规则，可以用来解决内部元素浮动，导致父级元素的高度坍塌问题。

3. BFC的触发条件

• 根元素
• flloat的值不是none
• position的值不是static或relative
• display的值是inline-block、inline-flex、flex、flow-root、table-caption、table-cell
• overflow的值不是visible

4. BFC的应用

• 清除浮动
  根据BFC的渲染规则第6点（计算BFC容器的高度时，浮动元素也参与计算）来清除浮动，解决高度坍塌的问题。
• 解决上下margin边距重叠问题
  利用BFC渲染规则第2点（属于同一个BFC的两个相邻块级元素的margin会发生重叠），那么不属于同一个BFC的两个相邻块级元素的margin就不会发生重叠。
• 实现自适应两栏布局