什么是BFC

先让我们理解一下什么是BFC。

BFC是Block Formatting Context的缩写，中文称为「块格式化上下文」。

可以理解为一块独立的渲染区域，也就是说，BFC拥有一套自己的渲染规则，不受外部影响，也不会影响到外界。

为了更形象地理解，我们把BFC当成一个封闭透明水缸，里面装着水，水上还漂浮着叶子。但是不管叶子怎么漂，都不会漂出这个水缸，其他的东西也不会影响到水缸里面的东西。

BFC能做什么

理解了BFC的概念，我们就来看看BFC这个水缸到底能做些什么。

1. 解决高度坍塌（清除浮动）

我们先来看看这段代码

<style>
  .tank {
    padding: 10px;
    background-color: skyblue;
  }
  .leaf {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #c1f5b3;
  }
</style>
<div class="tank">
  <div class="leaf"></div>
</div>

非BFC元素出现高度坍塌问题
我们可以看到，由于叶子（绿色div）设置为了float元素，脱离了正常的文档流，所以父级元素——水缸（蓝色div）并没有把叶子包围住，也就产生了所谓的高度坍塌问题。

于是，叶子对水缸说：“爸爸，说好的做我的顶梁柱呢，你怎么就塌了？！”

水缸摸了摸叶子的头，说：“儿子别急，爸爸这就站起来！”

这时候，水缸往自己身上加了个属性：

.tank {
  overflow: hidden;
  padding: 10px;
  background-color: skyblue;
}

这时候，奇迹出现了！

生成BFC后高度被撑起

2. 解决外边距重叠

我们假设鲜花和叶子的外边距都是margin: 10px 0;

如果把他们放在一起，按理来说，他们之间应该间隔20px才对，但是孤男寡女的，难免会产生爱的火花，二人步步逼近。

于是，外边距重叠问题就诞生。

<style>
  .leaf {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background-color: #c1f5b3;
  }
  .flower {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background-color: crimson;
  }
</style>
<div class="flower"></div>
<div class="leaf"></div>

外边距重叠
这时候，BFC水缸爸爸出现了，爸爸说：“小孩子不可以早恋！”

于是把叶子关了起来。

<style>
  .tank {
    overflow: hidden;
    background-color: skyblue;
  }
  .leaf {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background-color: #c1f5b3;
  }
  .flower {
    margin: 10px 0;
    width: 100px;
    height: 100px;
    background-color: crimson;
  }
</style>
<div class="flower"></div>
<div class="tank">
  <div class="leaf"></div>
</div>

外边距不再重叠
这时候，我们可以看到，二者的边界不再重叠。

那么，在同一个BFC内部的两个元素会发生外边距重叠吗？

答案是当然会重叠了！进了一家门，就是一家人啦！

同一个BFC下的元素外边距重叠

3. 自适应布局

利用BFC可以实现自适应的双列和三列布局。

双列自适应布局

双列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。

BFC爸爸教育儿子，与人相处要给他人留点空间，不可以逼的太紧，否则就会出现以下的情况。

<style>
  .tank {
    height: 500px;
    background-color: skyblue;
  }
  .left {
    float: left;
    width: 100px;
    height: 300px;
    background-color: coral;
  }
</style>
<div>
  <aside class="left">左侧</aside>
  <main class="tank">主区域</main>
</div>

左侧空余部分被填充

利用BFC则可解决。

.tank {
  overflow: hidden;
  height: 500px;
  background-color: skyblue;
}

BFC双列自适应布局

三列自适应布局

三列自适应布局是中间列自适应宽度，旁边两侧固定宽度的布局方式。

BFC爸爸教育儿子：做人要懂得谦让，你们先选，我补位。

<style>
  .tank {
    overflow: hidden;
    height: 500px;
    background-color: skyblue;
  }
  .left {
    float: left;
    width: 100px;
    height: 300px;
    background-color: coral;
  }
  .right {
    float: right;
    width: 100px;
    height: 300px;
    background-color: coral;
  }
</style>
<div>
  <aside class="left">左侧</aside>
  <aside class="right">右侧</aside> // 注意书写顺序，aside先写。（谦让！！）
  <main class="tank">主区域</main>
</div>