BFC揭秘，其实也不过如此 | CSS

相信每个前端er多多少少都有接触过BFC这个概念，也有许多人表示对这个概念难以理解。

其实BFC并不是什么神秘莫测的东西，看完这篇文章，你就会觉得：“啥？BFC就这样？”

对，BFC就这样。

什么是BFC

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

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

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

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

BFC能做什么

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

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

我们先来看看这段代码

非BFC元素出现高度坍塌问题

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

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

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

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

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

这时候，奇迹出现了！

生成BFC后高度被撑起

2. 解决外边距重叠

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

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

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

外边距重叠

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

于是把叶子关了起来。

外边距不再重叠

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

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

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

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

3. 自适应布局

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

双列自适应布局

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

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

  
左侧
  
主区域

左侧空余部分被填充

利用BFC则可解决。

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

BFC双列自适应布局

三列自适应布局

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

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

  
左侧
  
右侧
 // 注意书写顺序，aside先写。（谦让！！）
  
主区域

BFC三列自适应布局

BFC特点

看了以上的例子，相信各位对BFC的特点也有了一定的了解。总结起来就是：

1. BFC是独立的，不影响外部，也不被外部影响。
2. BFC的高度包括浮动的子元素
3. BFC的区域不会与其他元素发生外边距重叠
4. BFC内部的元素会发生外边距重叠

BFC如何创建

死记硬背的时刻到了。
一个块格式化上下文由以下之一创建：

1. 根元素 就是一个纯天然的BFC
2. 浮动元素 (元素的 float 不是 none)
3. 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4. 内联块 (元素具有 display: inline-block)
5. 表格单元格 (元素具有 display: table-cell, HTML表格单元格默认属性)
6. 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7. 具有overflow 且值不是 visible 的块元素。

总结

怎么样？BFC是不是并没有想象中的那么深不可测。

重在理解，理解后就会有一种豁然开朗之感~