前言

今天在题目里看到了BFC的提问，虽然之前对于BFC有粗浅的了解过。但是到目前为止已经比较久远了，对BFC的记忆已经不是很清楚了。只记得BFC的触发方法以及用户。所以今天写这篇文章来对之前的学习做一个总结。

BFC是什么？
BFC全称为块级格式上下文（Block Formatting Context）。是CSS的一种渲染机制。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC规则

  • 内部的盒子会在垂直方向，一个接一个的排列
  • 盒子垂直方向的距离由margin来决定，属于同一个BFC的两个盒子，在相邻方向的外边距会发生重叠
  • BFC区域不会和float盒子区域重叠。
  • BFC就是页面上的一个隔离的独立容器， 容器内的子元素和BFC外面的元素互不影响.
  • 对于从左往右的格式化来说每个盒子的margin-left与包含块容器的border-left相接触，对于从右往左的格式化刚好相反。即使存在浮动也是如此。

如何触发BFC

  • 根元素html
  • overflow不为visible
  • position为absolute或fixed
  • float不为`none
  • display 的值为 table-cell, table-caption,inline-block 中任何一个
  • display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • 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）。

BFC用处

  • 清除浮动
  • 防止margin重叠(其实这里我觉得不用相邻的margin就可以了。。)
  • 两栏自适应布局

总结

BFC的内容其实不多，规则看起来也比较拗口，但是BFC本身其实我们一直都在使用。希望以后的某天回忆BFC的时候我还能清晰记住BFC的规则
That’s all! Thanks for watching!