BFC (Block Formatting Context) 原理规则，看这篇就够了

BFC (Block Formatting Context) 原理 & 规则

一 BFC是什么？

定义：BFC是Web页面中的一个独立的渲染区域，它规定了其内部的盒子如何布局，以及与其他BFC之间的关系。
作用：提供了一套布局上的规范，确保BFC内的元素布局不会影响到外部的元素布局。

BFC的特点：

垂直堆叠：在一个BFC中，块级元素会按照源代码的顺序垂直堆叠。
margin折叠：属于同一个BFC的两个相邻块级元素的垂直margin会发生重叠，而不同BFC间的margin不会重叠。
不与浮动元素重叠：BFC的边界不会与浮动元素重叠，这可以用来清除浮动的影响。
计算高度：BFC可以包含浮动元素，这意味着即使有浮动元素，父元素也能正确地计算自己的高度。
隔离性：BFC是一个独立的容器，BFC区域内的元素不会影响到其他BFC区域的布局。

二 创建BFC的方式：

根元素（<html>）自动形成BFC。
浮动元素（float值不为none）。
绝对定位元素（position值为absolute或fixed）。
overflow值不为visible的块级元素。
display值为flow-root的元素。
display值为table-cell、table-caption，或者inline-block的元素。
column-count或column-width不是auto的多列容器。
contain值为layout、content或paint的元素。

三 应用场景：

清除浮动：当一个元素内包含浮动元素时，可以通过将该元素转换成BFC来解决高度塌陷的问题。
防止margin重叠：当两个相邻的块级元素之间发生margin重叠时，可以将其中一个元素转换成BFC来避免这种情况。
避免与其他浮动元素重叠：当需要确保一个元素不与前面的浮动元素重叠时，可以将该元素转换成BFC。

四 应用实例：

当然，下面是几个常见的BFC应用场景及其对应的代码实例：

清除浮动

假设有一个容器，里面有两个浮动的子元素，导致容器的高度塌陷。通过将容器转换成BFC，可以解决这个问题。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .container {
            border: 1px solid black;
            /* 创建BFC */
            overflow: auto;
        }
        .box {
            width: 100px;
            height: 100px;
            float: left;
        }
        .box1 {
            background-color: red;
        }
        .box2 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>
</body>
</html>

防止margin重叠

假设两个相邻的块级元素之间发生了margin重叠，通过将其中一个元素转换成BFC，可以避免这种情况。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防止margin重叠</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 20px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 创建BFC */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

避免与其他浮动元素重叠

假设有一个浮动的元素和一个非浮动的元素，非浮动的元素需要避免与浮动元素重叠，通过将非浮动元素转换成BFC，可以实现这一点。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>避免与其他浮动元素重叠</title>
    <style>
        .float-box {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .non-float-box {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 创建BFC */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="float-box"></div>
    <div class="non-float-box"></div>
</body>
</html>

以上就是关于BFC的基本原理和规则，希望对你有所帮助。如果你有更具体的问题或需要进一步的解释，请随时提问。

PS:学会了记得，点赞，评论，收藏，分享