前言

面试官问了你那么多次，你还不知道BFC的概念及作用吗？又到了巩固前端基础的时间，本文记录BFC概念、触发条件以及一些用BFC作为解决方案的常见案例。

BFC概念

官方解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

我们可以把它想象成一个特殊属性或者技能，触发了BFC的元素：

会拥有一个独立的布局空间，不会受到外界影响。
能够在布局时考虑到浮动元素与其交互，不会被浮动元素影响布局。

如何触发BFC

极为常见必须记住的：

Html根标签本身触发BFC。
开启了浮动的元素触发BFC，也就是float属性设置为非none（默认值是none）。
设置overflow的元素触发BFC，也就是overflow属性设置为非visible（默认值是visible）
设置绝对定位与固定定位的元素触发BFC，也就是position属性设置为absolute或者fixed。
设置了弹性盒或行内块元素的元素，也就是display属性设置为flex或者inline-block。

官方的全部触发条件：在这里插入图片描述

BFC使用场景

父元素塌陷

出现原因是因为一个普通的元素没有设置高度，当它体内的元素全部浮动时，父元素的高度没有元素撑起，就塌陷了。

<style>
    #box1 {
        border: 5px solid red;
        background-color: aquamarine;
        width: 500px;
    }

    #box2 {
        border: 5px solid yellow;
        background-color: aqua;
        height: 50px;
        width: 250px;
        float: left;
    }
</style>
<body>
<div id="box1">
   <div id="box2"></div>
</div>
</body>
复制代码

在这里插入图片描述我们知道BFC元素布局时可以考虑到浮动元素，因此我们可以将box1触发BFC。

<style>
    #box1 {
        border: 5px solid red;
        background-color: aquamarine;
        width: 500px;
        /*设置overflow为非visible*/
        overflow: hidden;
        /*有兴趣可以试试设置行内元素*/
        /*display: inline-block;*/
        /*或者设置浮动*/
        /*float: left;*/
    }
</style>
复制代码

在这里插入图片描述

外边距重叠

两个同级元素，上面的元素设置下边距30px，下面的设置上边距40px，我们本来希望它是70px的间距，可是因为外边距重叠，只保留了最大的间距40px。

<style>
    #box1 {
        border: 5px solid red;
        background-color: aquamarine;
        width: 500px;
        height: 50px;
        margin-bottom: 30px;
    }

    #box2 {
        border: 5px solid yellow;
        background-color: aqua;
        height: 50px;
        width: 250px;
        margin-top: 40px;
    }
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
复制代码

在这里插入图片描述我们想要触发BFC的元素内部布局不会受到外部影响，因此我们想到可以创造一个BFC元素将其中一个元素包括在它体内，就不会被另一个元素影响了。

<body>
<div id="box1"></div>
<div id="bfc" style="overflow: hidden">
    <div id="box2"></div>
</div>
</body>
复制代码

在这里插入图片描述

浮动元素与普通元素重叠

因为box1浮动了，因此box2就和box1重叠在一起了。

<style>
    #box1 {
        border: 5px solid red;
        background-color: aquamarine;
        width: 500px;
        height: 50px;
        float: left;
    }

    #box2 {
        border: 5px solid yellow;
        background-color: aqua;
        height: 80px;
        width: 250px;
    }
</style>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
复制代码

在这里插入图片描述与解决高度塌陷同理，触发了BFC就不怕浮动影响了，因此我们给box2触发BFC。

<style>
    #box2 {
        border: 5px solid yellow;
        background-color: aqua;
        height: 80px;
        width: 250px;
        /*设置*/
        overflow: hidden;
    }
</style>
复制代码

在这里插入图片描述

尾言

如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

html BFC的概念及作用

前言

BFC概念

如何触发BFC

BFC使用场景

父元素塌陷

外边距重叠

浮动元素与普通元素重叠

尾言

猜你喜欢