高度塌陷和BFC（Block Formatting Context）

引言

在前端面试中，BFC是一个很经常问到的概念。今天我们就来一起了解下什么是BFC，以及它的主要作用。在学习BFC之前，我们先来看看什么是高度塌陷：

高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，子元素多高，父元素就会被撑开多高。但是当子元素设置为浮动（float:left/right）以后，子元素就会脱离文档流，这就导致子元素无法撑起父元素的高度，产生了高度塌陷。下面我们用一个案例演示一下。

我们首先创建一个html页面，里面添加3个div容器

将看到如下效果：

然后我们给box2添加一个浮动属性

效果是这样的：

我们可以很清晰的看到由于box2设置了向左浮动，所以脱离了文档流，也就导致了box2之外的box1容器感知不到box2的存在，因此高度变成了0。高度塌陷以后，下面的元素必然会向上拱，这样就让布局非常混乱。那么如何解决这个问题呢？

• 方法一: 给父元素设定一个固定高度

  这种方式不利于后期维护（子元素高度随时会变），因此不可取

• 方法二：开启父元素的BFC

什么是BFC

根据W3C的标准，BFC（Block Formatting Context）叫块级格式化上下文，BFC是CSS中隐
含的属性，该属性可以设置打开或者关闭，默认是关闭的，当我们为一个元素开启BFC后，
该元素会变成一个独立的布局区域。总之BFC的目的就是：形成一个完全独立的空间，让空
间里的子元素不会影响到外面的布局，并且触发了BFC的容器具有普通容器所没有的一些特
性。

BFC的特性

1. 开启BFC的元素不会被浮动元素所覆盖
2. 开启BFC的元素父元素的垂直外边距不会和子元素重叠
3. 开启BFC的元素可以包含浮动的子元素

开启BFC的方法

1. 将元素的overflow设置为非visible（即overflow:hidden/scroll/auto）

   推荐将overflow属性设置为auto。

2. 使用display: flow-root

   display:flow-root可以将元素转换为块元素并开启BFC，但是存在兼容性问题,不兼容IE。

3. 设置元素的浮动（float）值不为none（即：left/right之一）

   不推荐，会导致元素宽度丢失。

4. 将元素设置为行内块元素（display：inline-block）

   不推荐，同样会导致元素宽度丢失。

5. 设置元素绝对定位(position:absolute;fixed)

   不推荐，同样会导致元素宽度丢失。

6. 特定布局方式 (display: inline-block/flex/table-cells)

BFC验证

开启BFC能够解决高度塌陷问题的验证很简单，只需要增加以上列举的开启BFC方法中任意一个，我们以设置overflow:auto 为例。

刷新网页，可以看到高度塌陷的问题已经被解决：

总结

BFC是前端工程师需要掌握的一个基本概念，希望大家可以掌握处理高度塌陷的多种方法，这样我们才能够在工作中灵活处理遇到的问题。