关于对CSS中BFC的理解

末蓝、 2021-06-26 16:06 520阅读 0赞

也许你已经掌握了`HTML、CSS`的基本布局技能，但是有可能还有一些难以琢磨透的专业名词还不是很清楚，比如`BFC`。今天我们就来聊聊对`BFC`的理解，以便我们在布局的过程中能够更加得心应手。

## 概念 ##

`BFC(Block Formatting Context)`，块级格式化上下文，一个创建了新的`BFC`的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。

`BFC`是`Web`页面中盒模型布局的一种`CSS`渲染模式。它的定位体系属于常规文档流。

W3C规范定义：

> 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 `inline-blocks, table-cells`, 和 `table-captions`），以及`overflow`值不为“`visiable`”的块级盒子，都会为他们的内容创建新的`BFC`（块级格式上下文）。
> 
> 在`BFC`中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的`margin` 值所决定的。在一个`BFC`中，两个相邻的块级盒子的垂直外边距会产生折叠。
> 
> 在`BFC`中，每一个盒子的左外边缘（`margin-left`）会触碰到容器的左边缘(`border-left`)（对于从右到左的格式来说，则触碰到右边缘）。

## 行成要素 ##

W3C中提到：

一些元素，如`float`，绝对定位元素，`inline-block, table-cell, table-caption`,和`overflow`的值不为`visible`的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。

归纳形成`BFC`的几个要点：

*  `float`的值不为`none`;
 *  `position`的值不为`static`或者`relative`;
 *  `display`的值为 `table-cell, table-caption, inline-block, flex`, 或者`inline-flex`中的其中一个;
 *  `overflow`的值不为`visible`。

详细可参考：MDN-块格式化上下文

## 创建一个`BFC` ##

创建一个新的`BFC`模式，只要满足上面所述要素中的任何一个条件即可，添加相关的`CSS`属性。

示例：

<div class="container"> Some Content here </div>

给容器`.container` 添加诸如：`overflow: scroll, overflow: hidden, display: flex, float: left`,或者 `display: table`等任何一个属性，就可以形成一个新的`BFC`。尽管这些条件都能形成一个`BFC`，但是它们各自却有着不一样的表现：

*  display: table; —— 在响应式布局中会有问题
 *  overflow: scroll; —— 可能会出现你不想要的滚动条
 *  float: left; —— 使元素左浮动，并且其他元素对其环绕
 *  overflow: hidden; —— 隐藏溢出部分

总的说来，建立`BFC`最好的方式也许就是`overflow:hidden`了，如下：

.container { 
      overflow: hidden;
    }

## 特点 ##

在同一个 `BFC` 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 `margin` 会发生折叠。  
所有属于`BFC`中的`Box`都默认左对齐，并且它们的左边距可以触及到容器`container`的左边。最后一个`Box`，尽管它是浮动的，但它依然遵循这个原则。

## 用途 ##

说了这么多规则与概念，那么我们运用`BFC`能做些什么呢？

**消除外边距合并**  
根据`BFC`布局规则第二条：

> `Box`垂直方向之间的距离由`margin`决定，属于同一个`BFC`的两个相邻`Box`的`margin`会发生重叠。

由此规则体现为：相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为重叠，并且因而所结合成的外边距称为重叠外边距。

产生折叠的必备条件：`margin`必须是邻接的!

**折叠的结果**

*  两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
 *  两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
 *  两个外边距一正一负时，折叠结果是两者的相加的和。

示例：

如图所示：  
![margin-collapse-01][]  
`item`元素垂直方向之间的`margin`值合并了，原本应该是`30px`，目前只有`15px`。

**解决方案**  
建立新的BFC元素包裹起来：

添加`CSS`属性：

.new-BFC { 
      overflow: hidden;
    }

这样被新`BFC`元素隔离出来的`item`就不受外部影响了，离第二个盒子之间的垂直`margin`距离达到`30px`，如图：

![margin-collapse-02][]  
但是个人觉得没必要这么做，其实一般情况下设置单方向的`margin`值就好了，比如给`item`都设置`margin-top:30px;`, 如果觉得第一个元素顶部边距太多可以单独添加`.item:first-child {margin-top:15px;}`，如果大家还有更好的见解也可以提出来讨论。

**容纳内部浮动元素**  
根据BFC布局规则第六条：

> 计算BFC的高度时，浮动元素也参与计算

由`BFC`的独立区域特性体现，`BFC`内部的元素不会影响到外部元素。

示例：

由于子元素浮动导致的父元素高度塌陷，如图：

![float-01][]  
**解决方案**  
清除浮动的方法有很多，更多方法可参考：你必须懂得的`CSS`清除浮动方法，4种清除浮动方法

这里我们可以根据W3C的规则触发父元素`content`形成`BFC`，让内部的浮动元素也参与计算，给父元素添加：

.content { 
        overflow: hidden;
    }

如图，父级高度由子元素撑开了：

![float-02][]

**自适应两栏布局**  
`BFC`布局规则第三条与第四条：

*  每个元素的`margin box`的左边， 与包含块`border box`的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此。
 *  `BFC`的区域不会与`float box`重叠。

了解以上规则后，我们可以利用`BFC`来实现自适应两栏布局。

示例代码：

根据`BFC`规则第三条体现为：紫色的`main`元素以及绿色的 浮动 元素`side`都会紧贴 `wrap`的左边 `border`（由于浮动元素脱离文档流会盖在紫色盒子上面），如图：  
![column-layout-01][]  
根据`BFC`布局规则第四条，我们可以采用给`main`添加`overflow: hidden;`来触发新的`BFC`，这样新的`BFC`元素不会与浮动的`side`重叠。

.main { 
        overflow: hidden;
    }

因此会根据父级元素的宽度以及`side`的宽度，自动变窄，形成侧栏固定，主体自适应宽度布局。如图所示：

![column-layout-02][]  
**利用`BFC`阻止文本环绕**  
我们经常见到的“左图+右文本”的布局方式，根据以上原理我们也可以利用`BFC`来解决文字环绕的问题，让文字隔离图片并自适应排版。

如下结构：

如图所示：  
![image-text-01][]  
有时候我们不想要上面的展示，而是下面的效果：

![image-text-02][]  
那么根据上面所了解的知识，我们可以触发`p`元素的`BFC`来形成新的`BFC`独有区域，不与浮动的图片元素重叠，因此给`.info`添加能触发`BFC`模式的`CSS`属性属性即可，这里采用`overflow:hidden;`，你也可以试试别的能够触发`BFC`的属性：

.info { 
      overflow: hidden;
      background: #f66;
    }

## 总结 ##

根据上面几个例子印证了`BFC`布局规则第五条：

> `BFC`就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因此我们可以利用这些特性来优化我们的`margin、float`元素、自适应布局等布局，希望今后在布局的过程中我们能够写出更加优雅的代码，深入地理解每一块布局结构原理。

[margin-collapse-01]: /images/20210626/6c6a768e92444b6d92c06f961e196d44.png
[margin-collapse-02]: /images/20210626/f3b92c2dfb0849ac8032b8f18632bc54.png
[float-01]: /images/20210626/29f835af247d4cd08bf4b984e82af1dc.png
[float-02]: /images/20210626/350055721d934af8bf450b26a2707910.png
[column-layout-01]: /images/20210626/c8902deb82d942f187fc6cf9e44da4a7.png
[column-layout-02]: /images/20210626/b8bfe0ea2b544c099f40f99ac1b32566.png
[image-text-01]: /images/20210626/2d5ad408a4644d17aa1642e5c27997e5.png
[image-text-02]: /images/20210626/a265e92f15a941b3b6de5fca09a412a4.png