谈谈你对BFC的理解

77 阅读 0 评论 51 点赞

我是靠谱客的博主勤恳芝麻，最近开发中收集的这篇文章主要介绍谈谈你对BFC的理解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、BFC的理解

BFC（即块级格式化上下文），它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

注意：只有块级盒子参与。

二、什么样的情况下，未形成BFC？

一个盒子不设置height，当内容子元素都浮动时，就无法撑起自身，这个盒子就没有形成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>
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

</html>

如何让父盒子有高度呢？

法一：

.father {
    float: left;
}

法二：

.father {
    position: absolute;
}

法三：

.father {
    display: inline-block;
}

法四：

.father {
    overflow: hidden;
}

三、创建BFC的方法

方法一：float的值不是none
方法二：position的值不是static或者relative
方法三：display的值是inline-block、flex或inline-flex
方法四：overflow:hidden;
这四种方式，更推荐使用哪一种？

更推荐使用方法四：overflow:hidden;

<!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>
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            border: 1px solid #000;
        }
        .father {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
    </div>
    <a href="#">123</a>
</body>

</html>

因为其他三种方法都可能影响到其他盒子。
比如说第三种：display:inline-block;会导致a标签的内容与父盒子在同一行。

<!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>
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            border: 1px solid #000;
        }

        .father {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
    </div>
    <a href="#">123</a>
</body>

</html>

四、BFC的作用

（1）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>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

取消盒子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>
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </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>
        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .son-last {
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son-last"></div>
    </div>
</body>

</html>

阻止元素被浮动元素覆盖：

<!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>
        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .son-last {
            width: 100px;
            height: 200px;
            background-color: pink;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son-last"></div>
    </div>
</body>

</html>