概念

Block Formatting Context 是 Web 页面的可视 CSS 渲染的一部分，是块级元素的布局过程发生的区域，也是浮动元素与其他元素交互的区域

特点

内部的盒子会在垂直方向，一个个地放置
盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠
- 两个相邻的外边距都是正数时，折叠外边距是两者中较大的值
- 两个相邻的外边距都是负数时，折叠外边距是两者中绝对值较大的值
- 两个相邻的外边距是一正一负时，折叠外边距是两者相加的和
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
BFC的区域不会与 float 重叠
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
计算 BFC 的高度时，浮动元素也参与计算

创建

根元素或包含根元素的元素
浮动元素 float:left | right 或 inherit
绝对定位元素 position:absolute 或 fixed
display:inline-block | flex | inline-flex | table-cell | table-caption | grid | flow-root
overflow:hidden | auto 或 scroll

作用

包含浮动元素（清除浮动）

高度塌陷

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>高度塌陷</title>
    <style>
      .container {
        overflow: hidden; /* creates block formatting context */
        background-color: black;
      }
      .container .Sibling {
        float: left;
        margin: 10px;
        background-color: lightgreen;
        width:100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="Sibling"></div>
      <div class="Sibling"></div>
    </div>
  </body>
</html>
```

CSS系列 - BFC

概念

特点

创建

作用

包含浮动元素（清除浮动）