前言

什么是BFC?

全称为Block Formatting Context ---- 块级格式化上下文

BFC布局规则

内部的Box会在垂直方向，一个接一个地放置
BFC容器内部和外部相互隔离，互不影响---解决margin重叠问题
BFC容器内，在垂直方向上相邻元素的margin会重叠
BFC容器在计算高度时，浮动元素也参与计算 --- 清除浮动

触发BFC

ovflow:hidden || auto || overlay || scroll
float:left || right
position:absolute || fixed
display:inline-block
display:table-cell || table-xxx
diplay:flex || inline-flex

示例

<!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>
        .warp{
            height: 500px;
            background-color: aqua;
            margin-top: 100px;
        }
        .box{
            height: 200px;
            background-color: rgb(227, 246, 19);
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="box"></div>
    </div>
</body>
</html>

结果

这个结果有bug，box应该相对于warp向下移50px,这叫margin重叠

margin重叠只发生在上下，不发生在左右

内部的Box会在垂直方向，一个接一个地放置

<!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>
        ul{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
    <ul>
        <li style="width: 200px;height: 50px;background-color:aqua">1</li>
        <li style="width: 200px;height: 50px;background-color:rgb(240, 200, 25)">2</li>
    </ul>
    </div>
</body>
</html>

结果

设置了overflow: hidden;ul就会成为BFC容器，BFC容器里面的元素成一列排布，而弹性容器里面的元素成一行排布。

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>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            overflow: hidden;
            margin-top: 100px;
        }
        li:nth-child(1) {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
    <ul>
        <li style="width: 200px;height: 50px;background-color:aqua">1</li>
        <li style="width: 200px;height: 50px;background-color:rgb(240, 200, 25)">2</li>
    </ul>
    </div>
</body>
</html>

li完全在ul内部里面

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>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            overflow: hidden;
            margin-top: 100px;
            background-color: #eee;
        }
        li{
            display: inline-block;
        }
        li:nth-child(1) {
            margin: 30px;
        }
        li:nth-child(2) {
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
    <ul>
        <li style="width: 200px;height: 50px;background-color:aqua">1</li>
        <li style="width: 200px;height: 50px;background-color:rgb(240, 200, 25)">2</li>
    </ul>
    </div>
</body>
</html>

在左右方向上margin不会重叠

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>
        li{
            width: 200px;
            height: 50px;
            list-style: none;
            float: left;
        }
    </style>
</head>
<body>
    <ul>
    <li style="background-color: aqua;">1</li>
    <li style="background-color:rgb(23, 241, 74) ;">2</li>
    <li style="background-color:rgb(207, 13, 13) ;">3</li>
    </ul>
</body>
</html>

此时ul未触发BFC容器，没有高度

ul{
    overflow: hidden;
}

ul{
    float: left;
}

以上两种方式都可以触发BFC容器，此时ul便有了高度，计算该高度时，浮动元素也参与计算。

结语

大家可以试试其他触发BFC容器的方法