【CSS基础】BFC

1. 定义

BFC（Block Formatting Context） 块格式化上下文，它是一个独立的渲染区域，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

2. 如何触发BFC

• 根元素：html
• overflow: 除了 visible 以外的值 (hidden、auto、scroll)
• 浮动元素：float 除 none 以外的值
• 定位：position 为 absolute 或 fixed
• display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

3. BFC的约束规则

• 内部的盒子会在垂直方向，一个接一个地放置
• 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷）
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。
• BFC 的区域不会与 float 盒子重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

4. BFC 应用

1. 防止margin重叠（塌陷）

<div class="container">
    <div class="box"></div>
    <div class="wrapper">
      <div class="box"></div>
    </div>
</div>

.wrapper {
  /**  触发 BFC */
  overflow: hidden;
}
.box {
  height: 100px;
  width: 100px;
  background-color: #f00;
  margin: 20px;
}

2. 清除内部浮动

浮动造成的问题就是父元素高度坍塌，根据上诉BFC的约束规则：计算BFC的高度时，浮动子元素也参与计算， 只要触发父元素的 BFC 即可。

<div class="container">
    <div class="box"></div>
</div>

.container {
  background-color: #ccc;
  /**  触发 BFC */
  overflow: hidden;
}
.box {
  height: 100px;
  width: 100px;
  background-color: #f00;
  margin: 20px;
  float: left;
}

3. 自适应两栏布局

根据上述BFC的约束规则：BFC 的区域不会与 float 盒子重叠，对侧边栏固定宽度且左浮动，而对右侧内容触发 BFC，使得它的宽度自适应该行剩余宽度。

<div class="layout">
    <div class="aside"></div>
    <div class="main"></div>
</div>

.layout {
  background-color: #ccc;
}
.aside {
  height: 100px;
  width: 100px;
  background-color: #f00;
  float: left;
}
.main {
  height: 100px;
  background-color: #00f;
  /** 触发BFC */
  overflow: hidden;
}