关于css布局中的BFC机制的一些浅显理解

Author：五毛
发布时间：August 12, 2019
1034views
No comments
2982 words
Categories：折腾笔记

BFC的英文全称是 **Block Formatting Contex** 翻译出来就是 格式化上下文，记得学习看过一堆专业的描述，但是都没记住。。
只记得最后老师这么总结：bfc就像是护崽的娘，不让孩子去打扰别人，也不让别人影响到自己。
下面就用我自己的语言进行mark一下吧：
BFC是 W3C CSS2.1 规范中提出的一个概念，它是页面中的一块渲染区域，并且它有一套渲染规则，决定了自己的子元素和周围的元素之间的关系。
**以下这些条件会产生BFC**（MDN里面查到的）：
1.根元素(<html>)
2.浮动元素（元素的 float 不是 none）
3.绝对定位元素（元素的 position 为 absolute 或 fixed）
4.行内块元素（元素的 display 为 inline-block）
5.表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
6.表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
7.匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-8.footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
9.overflow 值不为 visible 的块元素
10.display 值为 flow-root 的元素
11.contain 值为 layout、content或 paint 的元素
12.弹性元素（display为 flex 或 inline-flex元素的直接子元素）
13.网格元素（display为 grid 或 inline-grid 元素的直接子元素）
14.多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
15.column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

**bfc元素所具有的特性**
1.内部的盒子会在垂直方向上一个接一个的放置。（类似标准流）
2.垂直方向上的距离由margin决定 （类似标准流）
3.bfc的区域不会与float的元素区域重叠。（比如等分布局可以用到） 
4.计算bfc的高度时，浮动元素也参与计算 
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

说了这么多肯定都懵逼了，看看具体的一些应用
**1.解决css嵌套盒子外边距合并的问题（塌陷问题）。**
嵌套盒子外边距塌陷指的是，当一个盒子嵌套在另一个盒子中的时候，子盒子设置margin值之后，父盒子也会跟着掉下来

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
            }
            div {
                display: block;
                width: 300px;
                height: 200px;
                background-color: blue;
            }
    
            span {
                display: block;
                width: 180px;
                height: 80px;
                background-color: red;
            }
        </style>
    </head>
    
    <body>
        <div>
            <span></span>
        </div>
    </body>
    
    </html>

![塌陷问题][1]
这时候就可以创建新的BFC避免两个相邻盒子外边距产生合并问题

几种解决办法：
1：父容器：border：1px solid;（不能是0px）
2：父容器：overflow: hidden;（或auto）
3：父容器：padding：1px；（不能是0或auto，其他的任意数值都可以）
4：父容器或子容器： float：left；（不能是auto）
5：父容器或子容器：position：absolute；
6：子容器：display：inline-block;(或是inline-table)
7：相邻元素：任意一个添加float：left（不能是auto）

**2.解决因浮动造成的父元素上移问题**
这个很常见 给父元素加一个clearfix类名 创建一个BFC区域清除浮动
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
            }
    
            .clearfix::after {
                content: "";
                display: block;
                clear: both;
            }
    
            div {
                display: block;
                width: 300px;
                background-color: blue;
            }
    
            span {
                display: block;
                width: 180px;
                height: 80px;
                background-color: red;
                float: left;
            }
        </style>
    </head>
    
    <body>
        <div class="clearfix">
            <span></span>
        </div>
    </body>
    
    </html>

![浮动][2]

[1]: https://www.wumao.org/usr/uploads/2019/08/3568035823.png
  [2]: https://www.wumao.org/usr/uploads/2019/08/1149075865.png

Last modification：August 13th, 2019 at 10:23 am

If you think my article is useful to you, please feel free to appreciate