BFC块格式化上下文

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分。每个块级元素生成一个主块级盒，包含后代盒以及生成的内容。

创建方式

• 根元素（html）
• 浮动
• 绝对定位（absolute 或 fixed）
• 行内块元素（inline-block）
• 表格单元格（table-cell，HTML表格单元格默认为该值）
• 表格标题（table-caption，HTML表格标题默认为该值）
• overflow值不为 visible 的块元素
• display值为flow-root的元素

特征表现

• 外边距折叠只会发生在属于同一BFC的块级元素之间。
• 浮动不会影响其它BFC中元素的布局。
• 清除浮动只能清除同一BFC中在它前面的元素的浮动。
• BFC会包裹其中所有元素，包括浮动元素等

实际应用

1. 让浮动内容与周围内容等高（清除浮动）

浮动

  <div class="box">
    <div class="fl">i am a floated box</div>
    <p>i am content inside the container</p>
  </div>

.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
}

.fl {
  float: left;
  width: 200px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

由于浮动脱离了文档流导致<div> 的 background 和 border 仅仅包含了内容，不包含整个浮动。
创建一个会包含这个浮动的BFC就可以清除子元素浮动，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。

    .box {
      background-color: rgb(224, 206, 247);
      border: 5px solid rebeccapurple;
      overflow: hidden;
    }

2. 避免外边距塌陷

   
   外边距塌陷

    .blue,
    .red-inner {
      height: 50px;
      margin: 10px 0;
    }

    .blue {
      background: blue;
    }
    .red-inner{
      background: red;
    }

  <div class="blue"></div>
  <div class="red-inner">red inner</div>

根据BFC特性可以知道，可以再创建一个BFC，让blue和red不在同一个BFC中即可避免。

BFC避免

    .blue,
    .red-inner {
      height: 50px;
      margin: 10px 0;
    }

    .blue {
      background: blue;
    }
    .red-inner{
      background: red;
    }
    .red-outer {
      overflow: hidden;
    }

  <div class="blue"></div>
  <div class="red-outer">
    <div class="red-inner">red inner</div>
  </div>

3. 左侧固定，右侧自适应两栏布局

    .aside {
      width: 100px;
      height: 150px;
      float: left;
      background: #f66;
    }

    .text {
      height: 200px;
      background: #fcc;
    }

    .main {
      overflow: auto;
    }

  <div class="wrap">
    <div class="aside"></div>
    <div class="main">
      <div class="text"></div>
    </div>
  </div>

image.png

这里就利用了不和浮动元素重叠的特性。