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

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>

塌陷问题
这时候就可以创建新的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>

浮动

Last modification:August 13th, 2019 at 10:23 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment