[CSS]BFC原理

川长思鸟来 2022-12-08 04:17 115阅读 0赞

### 一、BFC 概念 ###

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

**具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素（外面也不会影响里面），并且 BFC 具有普通容器所没有的一些特性。**

### 二、触发BFC ###

只要元素满足下面任一条件即可触发 BFC 特性：

*  html根元素
 *  浮动元素：float 除 none 以外的值
 *  绝对定位元素：position (absolute、fixed)
 *  display 为flex、 inline-block、table-cells
 *  overflow 除了 visible 以外的值 (hidden、auto、scroll)

### 三、BFC 特性及应用 ###

#### 1. 同一个 BFC 下外边距会发生折叠 ####

<head>
    div{
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }
    </head>
    <body>
        <div></div>
        <div></div>
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center]  
从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。

首先这不是 CSS 的 bug，我们可以理解为一种规范，**如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。**

.container { 
        overflow: hidden;
    }
    p { 
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }

这时候，两个盒子边距就变成了 200px  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 1]

#### 2. BFC 可以包含浮动的元素（清除浮动） ####

我们都知道，浮动的元素会脱离普通文档流，来看下下面一个例子

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 2]

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。

效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 3]

#### 3. BFC 可以阻止元素被浮动元素覆盖 ####

先来看一个文字环绕效果：

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
    <div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
    也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 4]  
这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 5]  
转载自：https://zhuanlan.zhihu.com/p/25321647，有一些纠错修改

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/49d79016603b43b49cb10f31e7eb79c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/022fe111561841458192da6cb730e42a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/73cde5ac18774d3f85e687b7dc5c5037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/0331b9512a68472187160efe51571518.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/32af9a5e156d42688baeed38605d0f26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/129dd3101b5644e99b33dc2d04254ab7.png