BFC（块级格式化上下文）

BFC原理与应用：解决外边距重叠、清除浮动及阻止元素覆盖

最新推荐文章于 2024-12-30 15:36:30 发布

原创最新推荐文章于 2024-12-30 15:36:30 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

个人总结前端面试考点专栏收录该内容

7 篇文章

订阅专栏

BFC（Block Formatting Context）是CSS布局中的一种概念，用于创建独立的渲染区域。通过设置BFC，可以避免外边距重叠问题，如两个div之间的margin塌陷；同时，BFC也可用于清除浮动，确保父容器包含浮动子元素，防止父元素高度塌陷；此外，BFC还能阻止元素被内部浮动元素覆盖。了解并利用BFC，能有效提升网页布局的可控性和稳定性。

BFC（块级格式化上下文）

可以把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做一个被隔离的独立容器，容器内的元素不会影响容器外的元素。

BFC的作用

1、避免外边距重叠（防止margin塌陷）

margin塌陷的意思是，同时给两个div设置相同的margin:100px 0;那么两个div之间的距离应为200px，但是如果没有设置BFC属性，上下两个div外边距之间的外边距会合并为一个边距，去最大值，如果margin相等，则距离仅为一个margin的距离。

没有设置BFC时，两个div之间的外边距

给其中一个div包裹一个父容器，设置BFC属性，可以解决margin塌陷问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            overflow: hidden;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 100px 0;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="div1"></div>
    </div>
    <div class="div2"></div>
</body>

</html>

2、清除浮动

如果子容器设置浮动，则父容器会失去高度支撑，没有高度

可以通过给父元素设置BFC属性来清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            border: solid red 2px;
            overflow: hidden;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="div1"></div>
    </div>
</body>

</html>