你知道KFC但不一定了解BFC

站长

2024年06月12日 10:32 · 阅读数 41

什么是BFC

说到BFC大家脑海里会不会第一时间就浮现出KFC啊，此时脑中充满了各种KFC魔性文案。😂

你知道KFC但不一定了解BFC

好了，回到正题，今天我们要了解的是前端面试必备的知识点BFC。那么什么是BFC呢？用官方的介绍是:

BFC （Block Formatting Context 块级格式化上下文）

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

那具体是什么意思呢？简单理解就是，BFC是一个完全独立的空间，内部元素的渲染不会影响到外界。

用代码来举例:

<div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4">
            <div class="box5"></div>
            <div class="box6"></div>
        </div>
 </div>

在这段代码中假设box1和box4是两个BFC容器，那么box1这个BFC区域只包含子元素box2，box3，box4（注意：不能包含子元素的子元素box5，box6），而box4这个BFC容器包含box5，box6

形成BFC常见的条件

1.浮动元素 float : xxx    xxx 不是 none

2.绝对定位元素 position： absolute 或 fixed

3. 块级元素 overflow : xxx  xxx 不是 visible

4.display : flex 或 inline-block

BFC应用场景

1.解决外边距垂直坍塌

<!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>高度塌陷</title>
    <style>
        .box1 {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: red;

        }

        .box2 {
            margin: 50px;
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

你知道KFC但不一定了解BFC

可以看到上面我们为两个盒子的margin外边距分别设置为10px与50px，可结果显示两个盒子之间只有50px的距离（边距坍塌时取最大的那个margin），这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是margin之和，为了解决此问题可以使用BFC规则---给这两个盒子都添加一个父元素，并且将这个父元素设置为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>高度塌陷</title>
    <style>
        .box1 {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: red;

        }

        .box2 {
            margin: 50px;
            width: 200px;
            height: 200px;
            background: green;
        }

        .container {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1"></div>
    </div>
    <div class="container">
        <div class="box2"></div>
    </div>
</body>

</html>

你知道KFC但不一定了解BFC

这样两个盒子之间的距离就变成了margin之和。

2.解决包含坍塌

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含坍塌</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            background: green;
            width: 300px;
            height: 300px;
        }

        .box {
            background: red;
            width: 100px;
            height: 100px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">

        </div>
    </div>
</body>

</html>

你知道KFC但不一定了解BFC

当我们给子元素添加margin时，会带着父盒子一起移动。但是我们只想要子元素距离父元素50px，而不是带着父元素一起移动，这个时候我们也可以使用BFC来解决这个问题。只需将父元素设为BFC区域

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含坍塌</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            background: green;
            width: 300px;
            height: 300px;
            overflow: hidden;
        }

        .box {
            background: red;
            width: 100px;
            height: 100px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">

        </div>
    </div>
</body>

</html>

你知道KFC但不一定了解BFC

3.清除浮动

大家都知道，浮动的元素会脱离文档流会，这样会使得container高度没有被撑开，所以要解决这个问题我们也可以使用BFC，因为BFC里面的所有子元素都是不会影响到外部元素的。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC清除浮动示例</title>
    <style>
        .container {
            border: 1px solid black;
            background: black;
            /* 创建 BFC */
        }

        .float-left {
            float: left;
            height: 300px;
            width: 200px;
            margin: 50px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="float-left" style="background-color: #f00;">Float Left</div>
        <div class="float-left" style="background-color: #0f0;">Float Left</div>
        <!-- 这里的 .float-left 元素浮动，父元素 .container 使用 overflow: hidden; 触发 BFC -->
    </div>

</body>

</html>

你知道KFC但不一定了解BFC

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC清除浮动示例</title>
    <style>
        .container {
            border: 1px solid black;
            overflow: hidden;
            /* 创建 BFC */
        }

        .float-left {
            float: left;
            height: 300px;
            width: 200px;
            margin: 50px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="float-left" style="background-color: #f00;">Float Left</div>
        <div class="float-left" style="background-color: #0f0;">Float Left</div>
        <!-- 这里的 .float-left 元素浮动，父元素 .container 使用 overflow: hidden; 触发 BFC -->
    </div>

</body>

</html>

你知道KFC但不一定了解BFC

4.避免被浮动元素覆盖

我们知道浮动元素会脱离文档流，跑到另外一个平面，与原来文档流中的元素不在同一平面中，会导致覆盖掉其他的元素。如下:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            background: red;
            height: 200px;
        }

        .box2 {
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box2"></div>

    <div class="box1"></div>
</body>

</html>

你知道KFC但不一定了解BFC

那么如何解决这个问题呢？我们只需要将box1设置为BFC，此时box1即为一个独立的个体，就不会收到浮动的影响了。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            background: red;
            height: 200px;
            overflow: hidden;
        }

        .box2 {
            background: green;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box2"></div>

    <div class="box1"></div>
</body>

</html>

你知道KFC但不一定了解BFC

本篇文章就到此为止啦，希望通过这篇文章能对你理解BFC有所帮助，本人水平有限难免会有纰漏，欢迎大家指正。如觉得这篇文章对你有帮助的话，欢迎点赞收藏加关注，感谢支持🌹🌹。

你知道KFC但不一定了解BFC

转载自:https://juejin.cn/post/7367290539982569510