什么是BFC
2019-07-30 本文已影响0人
Johnson23
BFC 全称为 块格式化上下文 (Block Formatting Context) 。
作用：一般浮动元素会脱离文档流，而使用BFC可以使浮动元素包裹在BFC内部。
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文：
- 根元素(
<html>)- 浮动元素（元素的
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](https://drafts.csswg.org/css-display/#valdef-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）。块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
