【面试篇】深入理解BFC容器（Block Formatting Content）——块级格式化上下文

序言

书接上文 ：【面试篇】当面试官叫你谈谈浮动 关于它的特性你了解多少？

在上一篇文章我们了解了JS中浮动元素的用处、它的优缺点，以及清除浮动的各种方法，但是目前最常用的清除浮动的方法是BFC（Block Formatting Content）------ 块级格式化上下文

在JavaScript中，BFC（块级格式化上下文）是一种重要的布局概念，它能够帮助我们更好地控制和规范网页元素的排列和显示。在本文中，我们将讨论BFC容器的BFC的特点以及可以创建它的属性。

一、 BFC的特点

BFC容器具有一些重要的特点，它们对于网页布局和解决一些常见问题非常有帮助：

1. BFC容器计算高度时包括浮动元素：一个BFC容器会将其内部的浮动元素的高度也计算在内，这有助于防止父元素塌陷并正确地包裹浮动元素。这是BFC的一个重要特性，尤其在处理浮动元素时非常有用。

2. 解决内外margin重叠问题：BFC容器还可以用来解决内外margin重叠问题。当两个相邻元素的margin相遇时，它们的margin会合并，导致间距不如预期。但在BFC容器内部，margin不会合并，可以更精确地控制元素之间的间距。

那么现在就让我们开始了解BFC是如何解决这些问题的

二、 创建BFC的属性

1. display: inline-block

元素未创建BFC时的效果如下

ul li{
      list-style: none;
      width: 200px;
      height: 100px;
      float: left;
    }
    li:nth-child(1) {
      background: #da8383;
    }
    li:nth-child(2) {
      background: #e1e941;
    }
    li:nth-child(3) {
      background: #6ceb50;
    }
    .text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
    }

<div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div class="text">Hello World</div>
  </div>

元素创建BFC时的效果如下

ul{
      display: inline-block;
    }

2. display: table-cell

ul{
      display: table-cell;
    }

3. overflow: hidden || auto || overlay || scroll

1. overflow: hidden：当内容溢出容器的边界时，多余的内容将被隐藏，不可见。这意味着不会显示滚动条，也不会提供任何滚动功能。
2. overflow: auto：如果内容溢出容器的边界，滚动条会出现，允许用户滚动查看被隐藏的内容。如果内容未溢出，滚动条将自动隐藏。
3. overflow: overlay ：这是一个相对较新的值，它与auto类似，但在某些情况下会显示一个轻量级的滚动条，而不是传统的滚动条。它的行为可能会因浏览器的不同而有所变化。
4. overflow: scroll：无论内容是否溢出，始终显示滚动条，允许用户滚动内容。即使内容未溢出，也会显示滚动条，但会被禁用。

ul{
        /* overflow: hidden; BFC容器 */
        /* overflow: auto; BFC容器 */
        /* overflow: overlay; BFC容器 */
         overflow: scroll; 
    }

4. 弹性盒子(display : flex || inline-flex)

弹性盒子也是一种创建BFC容器的方法使用display: flex属性可以将元素变成一个块级弹性容器，而display: inline-flex属性则将元素变成一个内联弹性容器。

ul{
      /* display: flex; */
      display: inline-flex;
    }

5. 解决内外margin重叠问题

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100%;
            height: 600px;
            background: red;
        }
        .box{
            width: 100%;
            height: 300px;
            background: rgb(58, 10, 251);
        }
    </style>

<div class="wrap">
        <div class="box"></div>
    </div>

代码运行结果为

当我们给父容器设置margin-top: 100px; 子容器可想而知会随父容器往下移

.wrap{
            width: 100%;
            height: 600px;
            background: red;
            margin-top: 100px；
        }

这个时候我们想让子容器往上移，于是给box设置margin-top: 50px;按理来说子容器会相对父容器往下移

.box{
            width: 100%;
            height: 300px;
            background: rgb(58, 10, 251);
            margin-top: 50px;
        }

代码运行结果是

可以看到运行结果和之前是没有变化的，说明父容器与子容器的margin合并了，导致结果不如预期，我们通常使用overflow: auto来为父容器创建BFC来解决此问题

.wrap{
            width: 100%;
            height: 600px;
            background: red;
            margin-top: 100px；
            overflow: auto
        }

BFC后的运行结果为

如此看来这样我们margin边距的问题就得到了解决

总结

# BFC 容器 Block Formatting Content  块级格式化上下文

- 哪些属性可以触发BFC：

1. float: left || right

2. position: absolute || fixed

- 哪些属性可以创建BFC：

3. display: inline-block

4. display: table-cell ....

5. overflow: hidden || auto || overly || scroll

6. 弹性盒子 (display : flex || inline-flex)

- BFC的特点：

1. bfc容器在计算高度时，会将浮动元素的高度也计算在内

2. 用来解决内外margin重叠问题

感谢大家的阅读，点点赞吧♥

如果想了解更多有用的干货，点赞+收藏第一时间获取有用的小知识

开源Git仓库: gitee.com/cheng-bingw...

更多内容：【面试篇】当面试官叫你谈谈浮动 关于它的特性你了解多少？