MDN之CSS开发者指南【块格式化上下文】

待我称王封你为后i 2021-06-26 16:06 490阅读 0赞

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

下列方式会创建**块格式化上下文：**

*  根元素(`<html>`)
 *  浮动元素（元素的 `float` 不是 `none`）
 *  绝对定位元素（元素的 `position` 为 `absolute` 或 `fixed`）
 *  行内块元素（元素的 `display` 为 `inline-block`）
 *  表格单元格（元素的 `display`为 `table-cell`，`HTML`表格单元格默认为该值）
 *  表格标题（元素的 `display` 为 `table-caption`，`HTML`表格标题默认为该值）
 *  匿名表格单元格元素（元素的 `display`为 `table、table-row、table-row-group、table-header-group、table-footer-group`（分别是HTML `table、row、tbody、thead、tfoot`的默认属性）或 `inline-table`）
 *  `overflow` 值不为 `visible` 的块元素
 *  `display` 值为 `flow-root` 的元素
 *  `contain` 值为 `layout、content`或 `paint` 的元素
 *  弹性元素（`display`为 `flex` 或 `inline-flex`元素的直接子元素）
 *  网格元素（`display`为 `grid` 或 `inline-grid` 元素的直接子元素）
 *  多列容器（元素的 `column-count` 或 `column-width` 不为 `auto`，包括 `column-count` 为 1）
 *  `column-span` 为 `all` 的元素始终会创建一个新的`BFC`，即使该元素没有包裹在一个多列容器中。

块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位（参见 `float`）与清除浮动（参见 `clear`）都很重要。浮动定位和清除浮动时只会应用于同一个`BFC`内的元素。浮动不会影响其它`BFC`中元素的布局，而清除浮动只能清除同一`BFC`中在它前面的元素的浮动。外边距折叠（`Margin collapsing`）也只会发生在属于同一`BFC`的块级元素之间。

## 范例 ##

### 让浮动内容和周围的内容等高 ###

为了更好的理解`BFC`，我们先看看下面这些。

在下面的例子中，我们让 `<div>` 元素浮动，并给它一个边框效果。`<div>`里的内容现在已经在浮动元素周围浮动起来了。由于浮动的元素比它旁边的元素高，所以`<div>`的边框穿出了浮动。正如我们在这篇文章中 [guide to in-flow and out of flow elements][] 解释的，浮动脱离了文档流，所以 `<div>` 的 `background` 和 `border` 仅仅包含了内容，不包含整个浮动。

![在这里插入图片描述][20190823135647258.png]

.box { 
        background-color: rgb(224, 206, 247);
        border: 5px solid rebeccapurple;
    }
    
    .float { 
        float: left;
        width: 200px;
        height: 150px;
        background-color: white;
        border:1px solid black;
        padding: 10px;
    }

<div class="box">
        <div class="float">I am a floated box!</div>
        <p>I am content inside the container.</p>
    </div>

创建一个会包含这个浮动的`BFC`，通常的做法是设置父元素 `overflow: auto` 或者设置其他的非默认的 `overflow: visible` 的值。  
![在这里插入图片描述][20190823140018214.png]

.box { 
        background-color: rgb(224, 206, 247);
        border: 5px solid rebeccapurple;
        overflow: auto;
    }
    
    .float { 
        float: left;
        width: 200px;
        height: 150px;
        background-color: white;
        border:1px solid black;
        padding: 10px;
    }

<div class="box">
        <div class="float">I am a floated box!</div>
        <p>I am content inside the container.</p>
    </div>

设置 `overflow: auto` 创建一个新的`BFC`来包含这个浮动。我们的 `<div>` 元素现在变成布局中的迷你布局。任何子元素都会被包含进去。

使用 `overflow` 来创建一个新的`BFC`，是因为 `overflow` 属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建`BFC`的时候，你可能会发现一些不想要的问题，比如滚动条或者一些剪切的阴影，需要注意。另外，对于后续的开发，可能不是很清楚当时为什么使用`overflow`。所以你最好添加一些注释来解释为什么这样做。

### 外边距塌陷 ###

创建新的`BFC`避免两个相邻 `<div> 之`间的 外边距合并 问题

HTML

<div class="blue"></div>
    <div class="red-outer">
      <div class="red-inner">red inner</div>
    </div>

CSS

.blue, .red-inner { 
      height: 50px;
      margin: 10px 0;
    }
    
    .blue { 
      background: blue;
    }
    
    .red-outer { 
      overflow: hidden;
      background: red;
    }

结果  
![在这里插入图片描述][20190823140632870.png]

### 使用`display: flow-root` ###

一个新的 `display` 属性的值，它可以创建无副作用的`BFC`。在父级块中使用 `display: flow-root` 可以创建新的`BFC`。  
![在这里插入图片描述][2019082314083145.png]

.box { 
        background-color: rgb(224, 206, 247);
        border: 5px solid rebeccapurple;
        display: flow-root;
    }
    
    .float { 
        float: left;
        width: 200px;
        height: 150px;
        background-color: white;
        border:1px solid black;
        padding: 10px;
    }

<div class="box">
        <div class="float">I am a floated box!</div>
        <p>I am content inside the container.</p>
    </div>

给 `<div> display: flow-root` 属性后，`<div>` 中的所有内容都会参与`BFC`，浮动的内容不会从底部溢出。

The value name of flow-root makes sense when you understand you are creating something that acts like the root element ( element in browser) in terms of how it creates a new context for the flow layout inside it.

[guide to in-flow and out of flow elements]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
[20190823135647258.png]: /images/20210626/6176d01ed26d4a44bac99ffc1a11d043.png
[20190823140018214.png]: /images/20210626/5371983a1ccb4d9e9ddc94c21022a3db.png
[20190823140632870.png]: /images/20210626/e91d16144f884c4b8d9ea67c1ba8d071.png
[2019082314083145.png]: /images/20210626/915a8fdb84854cc38ba2b8ee8cb6ddb4.png