块格式化上下文是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
块格式化上下文(BFC)的创建
满足以下条件将创建块格式化上下文:
- 根元素()
- 浮动元素(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、tr、tbody、thead、tfoot 的默认值)或 inline-table)
- overflow 值不为 visible、clip 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content 或 paint 的元素
- 弹性元素(display 值为 flex 或 inline-flex 元素的直接子元素),如果它们本身既不是 flex、grid 也不是 table 容器
- 网格元素(display 值为 grid 或 inline-grid 元素的直接子元素),如果它们本身既不是 flex、grid 也不是 table 容器
- 多列容器column-span 值为 all 的元素始终会创建一个新的 BFC
块格式化上下文(BFC)的布局规则
- 在块格式化上下文中,从包含块的顶部开始,一个接一个地垂直排列框。
- 两个同级框之间的垂直距离由“margin”决定。块格式上下文中相邻块级别框之间的垂直边距折叠。
- 在块格式化上下文中,每个框的左外边缘与包含块的左边缘接触(对于从右到左的格式化,右边缘接触)。即使在存在浮点数的情况下也是如此(尽管框的行框可能会由于浮点数而收缩),除非框建立了新的块格式化上下文(在这种情况下,框本身可能会因为浮点数而变得更窄)。
块格式化上下文(BFC)的应用
- 清除浮动的影响
BFC元素可以用来清除浮动的影响,因为如果不清除,子元素浮动则父元素高度塌陷,必然会影响后面元素布局和定位,这显然有违BFC元素的子元素不会影响外部元素的设定。 - 清除边距重叠
BFC元素是不可能发生margin重叠的,因为margin重叠是会影响外面的元素的