BFC是什么

灿灿12138

已于 2023-06-04 14:30:45 修改

阅读量74

点赞数

文章标签：前端 html css3

于 2023-06-04 14:15:21 首次发布

本文链接：https://blog.csdn.net/ccc1006/article/details/131029515

版权

BFC是一种页面渲染机制，确保内部元素不影响外部元素。触发条件包括根元素、浮动元素、overflow不为visible的元素以及display为inline-block或flex的元素等。BFC常用于防止margin重叠，例如通过设置overflow:hidden创建BFC，使相邻元素不再发生margin塌陷。

摘要由CSDN通过智能技术生成

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则他是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

二、触发条件

触发BFC的条件包含不限于：

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、flex
position的值为absolute

三、应用场景

利用BFC的特性，我们将BFC应用在以下场景：

防止margin重叠（塌陷）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>