BFC

女爷i 2023-07-11 06:12 6阅读 0赞

### 说在前面： ###

#### 1. 文档流 ####

>  *  文档流包括浮动流、定位流以及普通的标准流。
>  *  普通标准流就是FC

#### 2. `FC` ####

> 格式化上下文，它是页面中一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及与元素之间的关系和作用

### BFC ###

>  *  `BFC(Block formatting context)`：“块级格式化上下文”。它是一个独立的渲染区域，是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。

#### 1. 触发`BFC`的条件(以下条件满足其一即可) ####

>  *  根元素，即html元素
>  *  `float`的值不为`none`
>  *  `position`的值为`absolute`或`fixed`
>  *  `overflow`的值不为`visible`
>  *  `display`的值为`inline-block`、`table-cell`、`table-caption`

#### 2. `BFC`的布局规则 ####

##### ① 在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 #####

##### ② `Box`垂直方向的距离由`margin`决定，属于同一个`BFC`的两个相邻`Box`的`margin`可能会重叠（下面讲重叠的充分条件） #####

##### ③ `BFC`区域不会与`float box`重叠 #####

##### ④ `BFC`是页面上一个隔离的独立的容器，容器中的子元素不会影响到外部元素 #####

##### ⑤ 计算`BFC`高度时，浮动元素也要参与计算（即若父元素是`BFC`，则会清除子元素的浮动的影响） #####

##### ⑥ 在`BFC`中每个盒子的左外边缘（`margin-left`）会触碰到容器的左边缘`border-left`(对于从右到左的格式来说，则触碰到右边缘。此处的盒子代表是行盒和块盒，行盒是由一行中所有内联元素所组成) #####

#### 3. `BFC`的作用 ####

##### ① 阻止元素被浮动的元素覆盖（可作多栏布局自适应） #####

> 依据`BFC`布局规则⑥，由于`html`也是一个`BFC`，所以其中的每个盒子（无论是子盒子还是后代盒子）的左外边缘都会触碰到容器的左边缘。故浮动元素和另一个子元素重叠。若要解决这个问题，可根据`BFC`布局规则③，将另一个元素创建一个`BFC`，则两者就不会重叠。

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

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

##### ② 清除浮动 #####

> 浮动的盒子的父元素是没有高度的，根据`BFC`的布局规则⑤，可以解决该问题：让父元素新建一个`BFC`，从而父盒子被撑开。

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> .green { background-color: green; } .red { width: 200px; height: 100px; float: left; background-color: red; } </style>
    </head>
    <body>
    <div class="green">
        <div class="red">red</div>
    </div>

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

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

##### ③ 解决同一个`BFC`区域的垂直方式`margin`塌陷的问题 #####

###### 解决 ######

> 让两个盒子属于两个不同的`BFC`（两个盒子分别是一个`BFC`不可，必须是所属于两个不同的`BFC`，即是两个不同`BFC`的子元素）

###### `margin`塌陷产生的条件 ######

>  *  必须是处于常规文档流(非`float`和绝对定位)的块级盒子，并且处于同一个`BFC`中。
>  *  没有`padding`和`border`将它们分别开。（注意：此时的`padding`、`border`是给父元素设置`padding`、`border`分隔，而非自身设置`padding`、`border`）
>  *  都属于垂直方向上的外边距，可以是下面任意一种情况  
>     ① 元素的`margin-top`与其第一个常规文档流的子元素的`margin-top`(这种情况只需要为该元素创建`BFC`，这样该元素与其子元素就属于不同的`BFC`的子元素了)  
>     ② 元素的`margin-bottom`与其下一个常规文档流的兄弟元素的`margin-top`/下一个常规文档流的兄弟元素的第一个子元素的`margin-top`  
>     ③ `height`为`auto`的元素的`margin-bottom`与其最后一个常规文档流的子元素的`margin-bottom`  
>     ④ 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的`BFC`的元素的`margin-top`和`margin-bottom`

###### 第③种情况示例： ######

<style> .green { background-color: green; height: auto; width: 100px; margin-bottom: 50px; } </style>
    </head>
    <body>
    <div class="green">
        <div style="margin-bottom: 10px">222</div>
    </div>
    </body>

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

<style> .green { background-color: green; height: auto; width: 100px; margin-bottom: 50px; overflow:hidden; } </style>
    </head>
    <body>
    <div class="green">
        <div style="margin-bottom: 10px">222</div>
    </div>
    </body>

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

*  ###### 设置`padding` ######

###### `green`元素和`hell`元素的`margin`重叠 ######

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

###### 给`hell`元素设置`padding`后 ######

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

*  ###### 设置`border` ######

###### 给父元素设置`border`后 ######

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

[20200305185513786.png]: https://img-blog.csdnimg.cn/20200305185513786.png
[20200305185542818.png]: https://img-blog.csdnimg.cn/20200305185542818.png
[2020030518565887.png]: https://img-blog.csdnimg.cn/2020030518565887.png
[20200305185740592.png]: https://img-blog.csdnimg.cn/20200305185740592.png
[20200305205435863.png]: https://img-blog.csdnimg.cn/20200305205435863.png
[20200305205156237.png]: https://img-blog.csdnimg.cn/20200305205156237.png
[2020030520534398.png]: https://img-blog.csdnimg.cn/2020030520534398.png
[20200305205356612.png]: https://img-blog.csdnimg.cn/20200305205356612.png
[20200305191010171.png]: https://img-blog.csdnimg.cn/20200305191010171.png
[2020030519103675.png]: https://img-blog.csdnimg.cn/2020030519103675.png
[20200305191204833.png]: https://img-blog.csdnimg.cn/20200305191204833.png