CSS - BFC - 《查漏补缺》

直接参考 MDN 即可。

BFC 全称 block formatting context ，中文译作「块格式化上下文」。

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文：

根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 [position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 为 absolute 或 fixed）
行内块元素（元素的 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 为 inline-block）
表格单元格（元素的 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
[overflow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow) 值不为 visible 的块元素
[display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
[contain](https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain) 值为 layout、content或 paint 的元素
弹性元素（[display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)为 flex 或 inline-flex元素的直接子元素）
网格元素（[display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 [column-count](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-count) 或 [column-width](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-width) 不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

块格式化上下文包含创建它的元素内部的所有内容。

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 [clear](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear)）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

常见作用：

包含浮动元素，即达到清除浮动的效果

问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。见： http://js.jirengu.com/punosagesu/3/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .box1, .box2, .box3 {
      width: 300px;
      height: 300px;
     float: left;
    }
    .box1 {
      background-color: red;
    }
    .box2 {
      background-color: green;
    }
  </style>
</head>
<body>
  <div class='box1'></div>
  <div class='box2'></div>
</body>
</html>

不被浮动元素覆盖

问题案例： div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。见：http://js.jirengu.com/baguxivelo/5/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
      body {
        overflow: hidden;
      }
    .box1 {
      background-color: red;
      float: left;
      width:300px;
      height: 100px;
    }
    .box2 {
      background-color: green;
      height: 200px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class='box1'>fdfdfdfdfdfd</div> 
  <div class='box2'>pppp</span>
</body>
</html>

阻止 margin 塌陷问题

见：http://js.jirengu.com/decojazocu/6/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .box1, .box2 {
      width: 200px;
    }
    .box1 {
      margin-top: 20px;
      height: 200px;
      background-color: red;
      overflow: hidden;
    }
    .box2 {
      margin-top: 10px;
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class='box1'>
    <div class='box2'></div>
    </div> 
</body>
</html>