什么是 BFC

BFC 称为块级格式化上下文

它会创建一个特殊的区域，在这个区域中只有 block box 参与布局，而BFC的一套规则就规定了在这个特殊的区域中如何进行布局，如何进行定位，区域内元素的相互关系和相互作用，这个特殊的区域不受外界影响。

block box 是指 display 属性为 block、list-item、table 的元素，相应的还有 inline box， 如 display 属性为 inline、inline-block、inline-table 的元素。

如何形成 BFC

那么什么样的情况会创建一个 BFC 呢？MDN 总结如下：

• 根元素或其他包含它的元素
• 浮动元素(元素的 float 不是 none)
• 绝对定位元素(元素具有 position 为 absolute 或 fixed)
• 内联块(元素具有 display: inline - block)
• 表格单元格(元素具有 display: table - cell，HTML 表格单元格默认属性)
• 表格标题(元素具有 display: table - caption, HTML 表格标题默认属性)
• 具有 overflow 且值不是 visible 的块元素
• display: flow - root 的元素
• column - span: all 的元素

BFC 决定了什么

BFC 有自己的一套规则，包括：

• 内部的 box 将会独占宽度，且在垂直方向，一个接一个排列
• box 垂直方向的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象
• 每个 box 水平方向上左边缘，与 BFC 左边缘相对齐，即使存在浮动也是如此
• BFC 区域不会与浮动元素重叠，而是会依次排列
• BFC 区域内是一个独立的渲染容器，容器内元素和 BFC 区域外元素不会形成任何干扰
• 浮动元素的高度也参与到 BFC 高度的计算当中

从上述规则中总结出最关键的三点：边距折叠、清除浮动、自适应多栏布局。

BFC 实战应用

例题1：

    <style>
      body {
        width: 600px;
        position: relative;
      }

      .left {
        width: 80px;
        height: 150px;
        float: left;
        background: blue;
      }

      .right {
        height: 200px;
        background: red;
      }
    </style>

    <div class="left"></div>
    <div class="right"></div>

效果如下

在这里插入图片描述

如何在不修改已有样式情况下，加入新样式，实现自适应两栏布局。（.left 宽度固定，.right 占满剩下宽度）

1. 根据 BFC 布局规则：“每个 box 水平方向上左边缘，与 BFC 左边缘相对齐。即使存在浮动也是如此”，因此 .left 和 .right 的左边相接触。
   所以就会出现 .right(普通box) 与 .left(BFC) 左边缘对其，即使 .left 是浮动的。
2. BFC 布局规则还有这样一条： BFC 区域不会与浮动元素重叠，而是会依次排列。
   那么就可以使 .right 形成 BFC，在 .right 中添加 overflow: hidden; 形成 BFC。

<style>
      .right {
        height: 200px;
        background: red;
        overflow: hidden; 
      }
</style>      

在这里插入图片描述

例题2：

    <style>
      .root {
        border: 5px solid green;
        width: 300px;
      }

      .child {
        border: 5px solid orange;
        width: 100px;
        height: 100px;
        float: left;
      }
    </style>

    <div class="root">
      <div class="child child1"></div>
      <div class="child child2"></div>
    </div>

效果如下

在这里插入图片描述

因为 .child 为浮动元素，因此造成了“高度塌陷”现象，.root 的高度为 0。
那么如何解决“高度塌陷”问题呢？

BFC 规则中：浮动元素的高度也参与到 BFC 高度的计算当中，那么也就是说让 .root 形成 BFC，其中的浮动元素 .child 的高度也会参与到 .root 的高度计算中，为 .root 添加样式 overflow: hidden;

<style>
      .root {
        border: 5px solid green;
        width: 300px;
        overflow: hidden;
      }
   
</style>      

在这里插入图片描述

例题3：

    <style>
      p {
        color: green;
        background: orange;
        width: 400px;
        line-height: 100px;
        text-align: center;
        margin: 40px;
      }
    </style>

    <p>p 1</p>
    <p>p 2</p>

效果如下

在这里插入图片描述

常理来讲 两个 p 标签的间距应该为80px，那实际效果为何是40px？

BFC 规则有一条：box 垂直方向的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象。
两个 p 标签属于同一个 BFC ，因此两个 p 的 margin 就出现了边距折叠问题。
最简单的解决办法，我们可以在其中一个 p 标签外再包裹一个元素，并让这个外层元素形成 BFC ，那这两个 p 标签不再属于同一个 BFC，解决了边距重叠问题。

代码如下：

    <style>
      p {
        color: green;
        background: orange;
        width: 400px;
        line-height: 100px;
        text-align: center;
        margin: 40px;
      }

      .wrapper {
        overflow: hidden;
      }
    </style>

    <p>p 1</p>
    <div class="wrapper">
      <p>p 2</p>
    </div>

在这里插入图片描述

完结

BFC 可以解决 css 中很多经典的问题，如边距折叠、多栏自适应、高度塌陷等问题。