BFC块级格式化上下文
提问
- 什么是 BFC ?
- 如何创建BFC ?
- BFC有什么作用 ？
什么是 BFC
BFC, Block Formatting Context。是 W3C CSS2.1规范中的一个概念。 是页面中的一块块级渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和作用。
具有BFC特性的元素，可以看做是一个被隔离了的独立容器，容器内的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
创建BFC的方式
- 根元素（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的元素
- contain值为 layout、content、paint的元素
- 弹性元素，display为 flex、inline-flex元素的直接子元素
- 网格元素， display为gird、inline-gird元素的直接子元素
- 多列容器，元素的column-count或column-width不为 auto， 包括column-count不为1
- colum-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。
作用
- 同一个BFC的外边距会发生折叠（合并）， 通过将其放在不同的BFC中规避折叠。
- BFC可以包含浮动元素，即清除浮动。
- BFC可以阻止元素被浮动元素覆盖。
