BFC(Block Formatting Context)

定义

Formatting context(格式化上下文),是页面中的一块渲染区域，并且有一套渲染规则，规定了内部的块级盒子如何布局，且与区域外部无关。

具有 BFC 特性的元素,可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有一些特性。

作用

• 修复浮动元素造成的高度塌陷问题。
  内部的元素如果浮动，会脱离普通文档流,导致容器高度塌陷。
  可以给外容器设置 overflow: hidden,触发容器的 BFC，那么容器将会包裹着浮动元素。
• 同一个BFC的margin发生折叠。
  外面再加一个盒子（使其放在不同的 BFC 容器中），设置overflow:hidden
• 实现多栏自适应布局。

tips:

display:flow-root声明后的元素，都会变成块级元素，同时这个元素会建立新的块级格式上下文。
display:flow-root 常用来实现多栏自适应布局。Safari浏览器从版本13开始支持。

• 两栏布局
  

• 多栏布局
  

触发

• 根元素 html
• 浮动元素 float 的值不为 none。 (left,right)
• 绝对定位 position 的值不为 relative 或 static。 (absolute, fixed)
• overflow 的值不为 visible。 (hidden, scroll)
• display: flow-root

特点

1. 在BFC中，块级元素从顶端开始垂直地一个接一个的排列。
2. 如果两个块级元素属于同一个BFC，它们的上下margin会折叠，，以较大的为准。
   但是如果两个块级元素分别在不同的BFC中，它们的上下边距就不会重叠了，而是两者之和。
3. BFC的区域不会与浮动的元素区域重叠，也就是说不会与浮动盒子产生交集，而是紧贴浮动边缘。
   tip: 如果相邻的元素为文字，那么文字本身就不会被重叠
4. 计算BFC的高度时，浮动元素也参与计算。（利用这个特性可以清除浮动）。
5. BFC是页面上的一个隔离的、独立的、容器，容器里面的子元素不会影响到外面的元素。