BFC是什么

[wuyanqian0503]

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC本质上是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC的特性：

1. 内部的Box会在垂直方向，一个接一个地放置(即块级元素独占一行)
2. BFC的区域不会与float box重叠(利用这点可以实现自适应两栏布局)
3. 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(margin重叠三个条件:同属于一个BFC;相邻;块级元素)。
4. 计算BFC的高度时，浮动元素也参与计算。（清除浮动 haslayout）
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC的作用：

与其说BFC的作用，不如说如何利用BFC特性来规避掉一些样式问题。

1. 让内部浮动内容和周围的内容等高
2. 避免外部浮动元素的遮盖
3. 避免相邻元素间垂直margin的折叠
4. 避免与内部第一个子元素或最后一个子元素的margin折叠，造成高度塌陷（可以理解为父元素和第一个或最后一个子元素也属于相邻元素），但BFC内部元素间的margin依然会折叠

如何创建块格式化上下文：

• 根元素（）
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。