前言

BFC定义

BFC(块级格式化上下文)(Block Formatting Context)是CSS中的一个概念，用于控制元素如何在布局中相互影响。BFC容器会创建一个独立的渲染区域，在这个区域内部，元素的布局不会受到外部元素的影响，不会与浮动元素重叠，且子元素垂直方向的间距不会合并。BFC常用于解决父元素包含浮动元素时出现的布局问题。通过触发BFC，可以控制元素的布局方式，避免一些意想不到的布局问题。

BFC布局规则

内部的盒子会在垂直方向，一个接一个的放置
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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            height: 500px;
            background: #d57d7d;
            margin-top: 100px; 
        }
        .box{
            height: 200px;
            background: #6350df;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
</html>

分析

上面代码给box容器设置的margin-top它是相对于body而不是wrap容器顶部的，是因为margin发生了重叠。

代码二

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            overflow: hidden;
            margin-top: 100px;
            background-color: #5e4ec9;
        }
        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: #de3e3e;">1</li>
            <li style="width: 200px;height: 50px;background-color: #41c2ac;">2</li>
        </ul>
    </div>
</body>
</html>

分析

上面代码的margin起效果了。是因为margin重叠只发生在上下，不发生在左右。

代码三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=u, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            width: 200px;
            height: 50px;
            list-style: none;
            float: left;
        }
    </style>
</head>
<body>
    <!-- ul>li*3{$} -->
    <ul>
        <li style="background-color: aqua;">1</li>
        <li style="background-color: rgb(165, 35, 67);">2</li>
        <li style="background-color: rgb(145, 184, 30);">3</li>
    </ul>
</body>
</html>

分析

当ul未触发BFC容器时是没有高度的

ul{
            overflow: hidden;
            /*注意只计算浮动元素的，不是脱离文档流的*/
        }

        ul{
            float: left;
        }

分析

以上两种方式都可以触发BFC容器，此时ul便有了高度，计算该高度时，浮动元素也参与计算。(还有其他触发BFC容器的方法，大家都可以去试试)

结语

通过这篇文章有对BFC容器更深的了解吗？麻烦给小编点个赞吧~

面试考点（二）：BFC容器

前言

BFC定义

BFC布局规则

触发BFC

代码演示

代码一

代码二

代码三

结语