### BFC（Block Formatting Context） FC 即格式上下文，它定义框内部的元素渲染规则，比较抽象，譬如 ``` FC 像是一个大箱子，里面装有很多元素 箱子可以隔开里面的元素和外面的元素（所以外部并不会影响FC内部的渲染） 内部的规则可以是：如何定位，宽高计算，margin 折叠等等 ``` 不同类型的框参与的 FC 类型不同，譬如块级框对应 BFC，行内框对应 IFC **注意，并不是说所有的框都会产生 FC，而是符合特定条件才会产生，只有产生了对应的FC后才会应用对应渲染规则** **BFC规则：** ``` 在块格式化上下文中 每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边） 即使存在浮动也是如此（所以浮动元素正常会直接贴近它的包含块的左边，与普通元素重合） 除非这个元素也创建了一个新的 BFC ``` 总结几点 BFC 特点： 1. 内部 `box` 在垂直方向，一个接一个的放置 2. box 的垂直方向由 `margin` 决定，属于同一个 BFC 的两个 box 间的 margin 会重叠 3. BFC 区域不会与 `float box` 重叠 (可用于排版) 4. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此 5. 计算 BFC 的高度时，浮动元素也参与计算（不会浮动坍塌） 如何触发 BFC？ 1. 根元素 2. `float` 属性不为 `none` 3. `position` 为 `absolute` 或 `fixed` 4. `display` 为 `inline-block`， `flex`， `inline-flex`，`table`， `table-cell`， `table-caption` 5. `overflow` 不为 `visible` 这里提下，`display: table` ，它本身不产生 BFC，但是它会产生匿名框（包含 `display: table-cell` 的框），而这个匿名框产生BFC 。