BFC

我不是女神ヾ 2024-04-17 06:07 66阅读 0赞

> 本文参考：[关于CSS-BFC深入理解][CSS-BFC]

## 1.BFC概念 ##

**一句话概括：** BFC就是CSS布局的一个概念，是一块区域，一个环境。  
**定义：** BFC(Block formatting context) 块级格式化上下文。它是一个**独立的渲染区域**，只有**Block-level box**参与，它规定了**内部**的Block-level Box如何布局，并且与这个区域外部毫不相干。  
**通俗解释：** BFC可以简单的理解为**某个元素的一个CSS属性**，只不过这个属性**不能被开发者显示的修改**，拥有这个属性的元素对内部元素和外部元素会表现出一些新特性，这就是BFC。

## 2.BFC的性质 ##

**满足下列条件之一就可以触发BFC：**

1.  根元素
2.  float的值不为none
3.  overflow的值不为visible
4.  display的值为inline-block、table-cell、table-caption
5.  position的值为absolute或fixed

**BFC的布局规则**

1.  内部的Box会在垂直方向，一个接一个地放置。
2.  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.  每个元素的margin box 的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.  BFC的区域不会与float box重叠。
5.  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.  计算BFC 的高度时，浮动元素也参与计算

**BFC的特征**（个人感觉是一个比较通俗的说法）  
（1）所有子元素（包含浮动元素）与容器（父元素）左边对齐  
（2）属于同一个BFC的父元素和子元素，相邻的父子或者兄弟间margin垂直方向会重叠，若2个元素属于不同的BFC，则垂直方向不会重叠  
（3）可以自动撑开容器（若子元素时float的，父元素设置overflow:hidden，父元素就形成了一个BFC）  
**BFC的作用**

1.  自适应两栏布局
2.  可以阻止元素被浮动元素覆盖
3.  可以包含浮动元素------清除内部浮动
4.  分属于不同的BFC时可以阻止margin重叠

## 3.分析 ##

**1.没有BFC和有BFC的比较**

没有BFC的时候：

#container {
            width: 500px;
            height: 500px;
            background-color: yellow;
            position: relative;
            margin-top:100px;
            /* position: absolute;
            top: 100px; */
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70]  
有BFC的时候：

#container {
            width: 500px;
            height: 500px;
            background-color: yellow;
            position: absolute;
            top: 100px;
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 1]

**2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠**

//css
    #box-1 {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: blue;
            margin-bottom: 60px;
        }
        #box-2 {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: red;
        }

![下面方块margin-top：50px][margin-top_50px]  
![上面的方块，margin-bottom: 60px][margin-bottom_ 60px]

[CSS-BFC]: https://juejin.im/post/5909db2fda2f60005d2093db#heading-8
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/9fbb16120ebe426b8b3d88ac6b299997.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNDY2NjYx_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/43e84e956e5e433ba3312cd49419cce6.png
[margin-top_50px]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/c4bdcb6310c5492cb9a1c9cfb61d3137.png
[margin-bottom_ 60px]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/4ab19d96379a41d9801db0e1342342cd.png