前端布局中的BFC

本文转自：黑马前端

1. 引言

想要了解BFC的规则，前提必须是熟悉前端网页的多种布局手段，例如盒的显示模式display（flex布局），三种布局手段标准流（normal）、浮动流（float）、定位流（position）等。

2. 定义

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的。

看不懂意思，我用代码来给你演示。

<divclass="box1"id="HM_bfc1">
    <divclass="box2"></div>
    <divclass="box3"></div>
    <divclass="box4"></div>
    <divclass="box5"id="HM_bfc2">
        <divclass="box6"></div>
        <divclass="box7"></div>
        <divclass="box8"></div>
    </div>
</div>

解释：#HM_bfc1 是一块 BFC 区域，这块区域包含了 box2、box3、box4、box5，也就是所有 #HM_bfc1 的子元素。同时 #HM_bfc2 也创造了一块 BFC 区域，包含了 box6，box7，box8。注意，第一个 box1 的BFC，只包括 box1 的子元素 box2345，不包括 box678。#HM_bfc2 这个 BFC 同样也仅仅是包括自己的子元素 box678。

划重点：

每一个BFC区域只包括其子元素，不包括其子元素的子元素。(这1点比较容易理解)
每一个BFC区域都是独立隔绝的,互不影响！(这点不太好理解，但是后续会使用代码验证)

2. 触发BFC

并不是任意一个元素都可以被当做BFC，只有当这个元素满足以下任意一个条件的时候，这个元素才会被当做一个BFC。

触发BFC的条件：

body根元素设置浮动，不包括none
设置定位，absoulte或者fixed
行内块显示模式，inline-block
设置overflow，即hidden，auto，scroll
表格单元格，table-cell
弹性布局，flex

上代码说明：

首先, body元素是1个BFC，因为它满足我们的第1个条件(body根元素)，这个BFC区域包含子元素hm1234，但是不包括两个p标签，需要注意的是，hm3不是一个BFC区域，因为他不满足上面任意1个条件。如果我们希望hm3也是1个BFC区域，只要让hm3满足上面任意一个条件即可。

这个时候，hm3元素被设置为了overflow为hidden，满足上面第5个条件，所以此时，hm3就成为了一个BFC区域，这个BFC区域包含其所有子元素 – 两个p标签。

划重点:

并不是所有的元素都是BFC, 只有满足了上面的任意1个条件之后，这个元素才成为1个BFC。
一个BFC区域，只包含其所有子元素，不包含子元素的子元素.

4. 利用BFC解决问题

还记得我们之前说过，BFC有一个特点是：**每一个BFC区域都是相互独立，互不影响的。**

4.1 解决外边距的塌陷问题（垂直塌陷）

外边距 margin 的垂直塌陷问题：

通过以上的实例，我们会发现，代码给两个div盒子，都添加了四个方向的margin，讲道理，100+100=200.可是，盒子之间的距离，现在却之后100px。这就是很典型的margin的塌陷，两段margin重叠到了一块，互相影响。那么，如何利用BFC，让这个问题得到解决呢。回忆下，上文说过，BFC，就是一个与世隔绝的独立区域，不会互相影响，那么，我们可以将这两个盒子，放到两个BFC区域中，即可解决这个问题。