BFC是什么

原创已于 2022-12-13 11:01:11 修改 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2022-08-06 15:22:22 首次发布

css 专栏收录该内容

7 篇文章

订阅专栏

什么是BFC

BFC即 Block Formatting Contexts (块级格式化上下文)，是 W3C CSS2.1 规范中的一个概念。
BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
从左往右的格式化，包括浮动。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

创建了BFC的元素具有下面的特性：

清除浮动只能清除同一BFC中在它前面的元素的浮动；
外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上。

怎样触发BFC

列举几个触发BFC的CSS样式：

position:absolute、fixed;
display:inline-block、flex、inline-flex、grid、inline-grid、flow-root;
overflow值不为visible的块元素。

推荐使用display:flow-root;，它不会带来其他副作用，是一个很好的选择。而overflow:auto;也是一个合适的选择。

BFC的应用

1. float引起父元素高度塌陷

<html>
<head>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin: 30px;
        }
        .container{
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
上面效果设置float脱离文档流，使父元素高度塌陷，可以使用为父元素设置CSS属性触发BFC的方法，实现清除浮动的效果。

修改代码：

        .container{
            background-color: black;
            overflow: hidden;
        }

效果：
在这里插入图片描述

总结几种清除浮动的方法：

触发BFC的方法。
额外标签法：在要清除浮动的元素后额外添加一个空白标签。
伪元素清除浮动法：父级添加伪元素，.container{ content: ""; display: table; clear: both; }。

2. 左右布局

<html>
<head>
    <style>
        div{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="float: left;">
        左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
    </div>
    <div style="width: 300px;">
        右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
    </div>    
</body>
</html>

效果：
在这里插入图片描述
可以看到上面元素，第二个div元素为300px宽度，但是被第一个div元素设置float脱离文档流给覆盖上去了，解决此方法我们可以把第二个div元素设置为一个BFC。

修改代码：

    <div style="width: 300px;display: flex;">
        右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右
    </div>

效果：
在这里插入图片描述

3. 外边距叠加

（1）上下叠加
当一个块级元素出现在另一个块级元素上面时，第一个元素的底外边距和第二个元素的顶外边距发生叠加。
在这里插入图片描述
（2）包含叠加
当一个元素包含在另一个元素中时，他们的顶和底外边距也会发生叠加。

（3）自身叠加
外边距也可以和本身发生叠加，前提有三个：空元素，有外边距，无内边距/边框。

如下box2的位置不是在box1下面50px处，而是30px处，发生了自身外边距叠加。叠加按照最大距离30px，box2为参照

<html>
<body>
    <div class="box1" style="margin-top: 30px;margin-bottom: 20px;"></div>
    <div class="box2" style="height: 30px;background-color: red"></div>
</body>
</html>

效果：
在这里插入图片描述
（4）多个叠加
如果这个外边距遇到另一个元素的外边距，它还会发生合并，前提有四个：空元素，有外边距，无内边距/边框，存在多个元素。

box3在下方40px处，box1叠加后又与box2叠加。叠加按照最大距离40px，box3为参照

<html>
<body>
    <div class="box1" style="margin-top:30px;margin-bottom: 20px;"></div>
    <div class="box2" style="margin-top:20px;margin-bottom: 40px;"></div>
    <div class="box3" style="height: 30px;background-color: red;"></div>
</body>
</html>