当前位置：网站首页>什么是BFC？有什么用？

什么是BFC？有什么用？

2022-06-27 04:46:00 【mrcsunflower】

一、什么是 BFC？

1.BFC 的定义

2.BFC 的规则

二、怎样使一个元素变成 BFC 区域（怎样触发 BFC）？

三、BFC 到底有什么作用（BFC解决了什么问题）？

1.解决外边距的塌陷问题（垂直塌陷）

2.利用BFC解决包含塌陷

3.BFC 可以阻止标准流元素被浮动元素覆盖

4.清除浮动

一、什么是 BFC？

1.BFC 的定义

BFC：Block Formatting Context，块级格式化上下文。

在官方文档到中是这么介绍的，一个 BFC 区域包含创建该上下文元素的所有子元素，但是不包括创建了新的 BFC 的子元素的内部元素，BFC 是一块块独立的渲染区域，可以将BFC 看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。

2.BFC 的规则

BFC 就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC 就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻的标签外边距会发生重叠
计算 BFC 的高度时，浮动元素也参与计算

详解：

<div class="box1" id="HM_bfc1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5" id="HM_bfc2">
            <div class="box6"></div>
            <div class="box7"></div>
            <div class="box8"></div>
        </div>
</div>

假设box1和box5是两个 BFC 区域，那么根据上述原理能理解到的就是，box1 这个 BFC 区域包含了子元素 box2，box3，box4，box5，但不包括 box6，box7，box8。而 box5 这块 BFC 区域则包含了 box6，box7，box8 这三个子元素。

总结：

每一个 BFC 区域只包括其子元素，不包括其子元素的子元素。
每一个 BFC 区域都是独立隔绝的，互不影响。

二、怎样使一个元素变成 BFC 区域（怎样触发 BFC）？

常用有以下几种办法：

设置浮动，不包括 none
设置 overflow，即 hidden，auto，scroll
行内块显示模式 display，inline-block
设置定位 position，absoulte 或者 fixed
表格单元格 display，table-cell
弹性布局 display，flex

三、BFC 到底有什么作用（BFC解决了什么问题）？

1.解决外边距的塌陷问题（垂直塌陷）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .HM {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="HM"></div>
    <div class="HM"></div>
</body>
</html>

效果如下：

原因是 margin 垂直塌陷。要解决这个问题只需要给这两个盒子都加一个父元素，并且将这个父元素设置成 BFC 区域，就可以解决 margin 塌陷的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .HM_bfc {
            overflow: hidden;
        }
        .HM {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="HM_bfc">
        <div class="HM"></div>
    </div>
    <div class="HM_bfc">
        <div class="HM"></div>
    </div> 
</body>
</html>

效果如下：

2.利用BFC解决包含塌陷

有时候我们给子元素加 margin 可能会带着父元素一起跑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    
    <div class="father">
        <div class="son"></div>
    </div>

</body>
</html>

效果如下：

这个问题用 padding 可以解决问题，但是用 BFC 同样可以解决，只需要将父元素变为BFC区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: red;
            overflow: hidden;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 50px;
        }
    </style>
</head>
<body>

    <div class="father">
        <div class="son"></div>
    </div>

</body>
</html>

3.BFC 可以阻止标准流元素被浮动元素覆盖

浮动的元素会脱离文档流，跑到上一个层面，也就是和原本的元素不在一个层面了。所以可能会导致浮动元素覆盖基本元素的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <!-- <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script> -->
    <style>
        .red{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .blue{
            height: 300px;
            background-color: blue;
        }

    </style>
</head>
<body>
    
    <div class="red"></div>
    <div class="blue"></div>

</body>
</html>

效果如下：

只需要让蓝色区域触发 BFC ，就可以做到不受浮动元素影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lightly-HTML-Project</title>
    <!-- <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script> -->
    <style>
        .red{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .blue{
            height: 300px;
            background-color: blue;
            overflow: hidden;
        }

    </style>
</head>
<body>
    
    <div class="red"></div>
    <div class="blue"></div>

</body>
</html>

效果如下：

4.清除浮动

浮动会导致父元素高度塌陷，那大家还记得怎么清除浮动吗？相信很多人都知道：overflow：hidden嘛。相信在认识BFC之前大家肯定不太清楚为什么overflow：hidden可以清除浮动。现在知道了，BFC区域内的子元素任何边动都是不会影响到外部元素的。所以 BFC 区域可以清除浮动带来的影响。这里就不举例说明了。

参考：https://www.jianshu.com/p/9211bdfe07d2

原网站

版权声明
本文为[mrcsunflower]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_45134488/article/details/125407831