【CSS】什么是BFC？

àì夳堔傛蜴生んèń 2022-11-28 13:17 213阅读 0赞

看面经的时候看到这样两个问题：

> BFC是什么？ 举个例子？  
> margin重叠问题？如何解决？

之前没有系统的了解过，所以就整理一下相关的知识。

### 1. BFC ###

官方定义：

> BFC（Block Formatting Context，块格式化上下文） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

上面就是关于BFC的官方定义，感觉很抽象。在看BFC之前先来看一下两个概念：

**（1）Box：css布局的基本单位**

Box是css布局的对象和基本单位，也就是说，一个页面是由多个Box组成的。元素的类型和display属性决定了Box的类型。不同类型的Box，内部元素的渲染方式不同。

Box主要分为两种：

*  **block-level box**：display 属性为 `block`。list-item, table 的元素会生成 block-level box。并且参与 `block fomatting context`；
 *  **inline-level box**：display 属性为 `inline`。 inline-block, inline-table 的元素会生成 inline-level box。并且参与 `inline formatting context`；

**（2）Formatting context**

Formatting context 是页面中的一块渲染区域，并且有一套渲染规则。它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 `Block fomatting context` (简称BFC)和 `Inline formatting context` (简称IFC)。

**BFC的理解：**

说完这两个概念就来说一下BFC，BFC是块格式化上下文，它决定了如何对其内容进行定位，以及与其他元素的关系和相互作用。

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。

BFC就像一个大箱子，箱子内部的内容无论怎样排列，都不会影响外部的箱子。

**触发BFC的条件：**

*  根元素：body
 *  元素设置浮动：float 除 none 以外的值
 *  元素设置绝对定位：position (absolute、fixed)
 *  display 值为：inline-block、table-cell、table-caption、flex等
 *  overflow 值为：hidden、auto、scroll

**BFC的特点：**

*  垂直方向上，自上而下排列，和文档流的排列方式一致。
 *  在BFC中上下相邻的两个容器的margin会重叠（也就是上面第六题提到的问题）
 *  计算BFC的高度时，需要计算浮动元素的高度
 *  BFC区域不会与浮动的容器发生重叠
 *  BFC是独立的容器，容器内部元素不会影响外部元素
 *  每个元素的左margin值和容器的左border相接触

**BFC的作用：**

*  **解决margin的重叠问题**：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。下面第二部分会列举详细的解决办法。
 *  **解决高度塌陷的问题**：我们在 对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC就行了。常用的办法是给父元素设置`overflow:hidden`。
 *  **创建自适应两栏布局**：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

.left{ 
         width: 100px;
         height: 200px;
         background: red;
         float: left;
     }
     .right{ 
         height: 300px;
         background: blue;
         overflow: hidden;
     }
     
    <div class="left"></div>
    <div class="right"></div>

左侧设置`float:left`，右侧设置ve`rflow: hidden`。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

### 2. margin重叠问题？如何解决？ ###

**问题描述：**

两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，**浮动的元素和绝对定位**这种脱离文档流的元素的外边距不会折叠。重叠只会出现在**垂直方向**。

**计算原则：**

折叠合并后外边距的计算原则如下：

*  如果两者都是正数，那么就去最大者
 *  如果是一正一负，就会正值减去负值的绝对值
 *  两个都是负值时，用0减去两个中绝对值大的那个

**解决办法：**

对于折叠的情况，主要有两种：**兄弟之间重叠**和**父子之间重叠**

（1）兄弟之间重叠

*  底部元素变为行内盒子：`display: inline-block`
 *  底部元素设置浮动：`float`
 *  底部元素的position的值为`absolute/fixed`

（2）父子之间重叠