这是我参与「第四届青训营」笔记创作活动的的第 3 天

什么是 BFC

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

理解：

BFC 是一个隔离的独立容器，容器内元素不影响到容器外面的元素。
BFC 内部的 Box 在垂直方向一个接一个放置。
属于同一个 BFC 的两个相邻 Box 的上下 margin 会发生重叠。不同 BFC 则互相不影响。
浮动元素会被记入 BFC 的高度。
BFC 区域不会与浮动元素重叠。

如何触发 BFC

float 浮动：值不为 none
overflow：值不为 visible
position：值为 absolute 、fixed
display：值为 inline-block、table-cell、table-caption
弹性布局 flex

BFC 应用场景

1. 解决块级元素垂直方向 margin 重叠

方法：将其中一个元素加父元素，且父元素设置 overflow: hidden

    <style>
        .box1 {
            width: 50px;
            height: 120px;
            background-color: rgb(204, 245, 165);
            margin: 30px auto;
        }

        .outer-box {
            overflow: hidden;
        }

        .box2 {
            width: 50px;
            height: 120px;
            background-color: rgb(188, 138, 238);
            margin: 30px auto;
        }
    </style>
</head>

<body>
    <div class="box1">box1</div>
    <div class="outer-box">
        <div class="box2">box2</div>
    </div>

2. 解决高度塌陷问题

子元素使用 float 浮动脱离了普通文档流，导致父元素高度塌陷为0，导致父元素样式如背景颜色未显示。（父元素原本未设置高度，但是我们需要子元素将父元素撑开，而浮动子元素脱离文档流，导致父元素未被撑开）

塌陷效果：

    <style>
        .parent {
            width: 150px;
            background-color: rgb(204, 245, 165);
        }

        .box {
            width: 50px;
            height: 20px;
            background-color: rgb(188, 138, 238);
            float: left;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box">box</div>
        <div class="box">box</div>
    </div>

解决方法：将父元素触发 BFC

    <style>
        .parent {
            width: 150px;
            background-color: rgb(204, 245, 165);
            display: inline-block;
            /* 或 overflow: hidden; 等等*/
        }

        .box {
            width: 50px;
            height: 20px;
            background-color: rgb(188, 138, 238);
            float: left;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box">box</div>
        <div class="box">box</div>
    </div>

3. 清除浮动

浮动元素会脱离普通文档流，而会覆盖其他的元素。如：

  <style>
        .box1 {
            width: 100px;
            height: 60px;
            background-color: rgb(188, 138, 238);
            float: left;
        }

        .box2 {
            width: 250px;
            height: 100px;
            background-color: rgb(209, 246, 160);
        }
    </style>
</head>

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

解决方法：将其他元素触发 BFC

    <style>
        .box1 {
            width: 100px;
            height: 60px;
            background-color: rgb(188, 138, 238);
            float: left;
        }

        .box2 {
            width: 250px;
            height: 100px;
            background-color: rgb(209, 246, 160);
            overflow: hidden;
        }
    </style>
</head>

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

4. 解决父子元素外边距重叠

子元素设置了margin，而无效果，显示的却是父子元素margin最大值作为父元素的外边距。

如：

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: rgb(200, 216, 222);
        }
        .parent {
            background-color: rgb(173, 148, 171);
            margin: 10px auto;
        }
        .box {
            width: 50px;
            height: 120px;
            background-color: rgb(204, 245, 165);
            margin: 30px auto;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box">box</div>
    </div>

解决方法：将父元素触发BFC

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: rgb(200, 216, 222);
        }
        .parent {
            background-color: rgb(173, 148, 171);
            margin: 10px auto;
            overflow: hidden;
        }
        .box {
            width: 50px;
            height: 120px;
            background-color: rgb(204, 245, 165);
            margin: 30px auto;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box">box</div>
    </div>

关于 BFC | 青训营笔记