深入理解分析BFC容器

历史小剧场

朱元璋之所以选择胡惟庸，并不是因为他很强，相反，正式因为胡惟庸对朱元璋的威胁小，所以朱元璋才让他成为了胜利者。而愚蠢的胡惟庸并不了解这一点。—《明朝那些事儿》

BFC概念

“BFC容器"通常是指"块级格式化上下文容器”（Block Formatting Context Container）。块级格式化上下文（BFC）是在CSS中用来管理和控制元素在页面上布局和排列的一种机制。BFC容器是一种具有特定规则的HTML元素或CSS属性，它们会创建一个独立的上下文，影响其内部元素的布局和排列方式。BFC容器是CSS布局中的一个重要概念，可以帮助开发人员更精确地控制元素的布局和排列。

理解：我们可以将BFC当作是元素的属性，当元素拥有了这个属性，这个元素就可以看作是一个隔离的独立容器

如何触发BFC？

• 根元素 </html
• 浮动元素：float
• 绝对定位元素：position为absolute或fixed
• display为 : inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或inline-flex、grid或inline-grid；
• overflow值不为visible的块元素；
• contain值为layout、content或paint的元素；
• 多列容器（元素的column-count或column-width不为auto，包括column-count为1）

三大作用

1. 避免外边距重叠
   比如：有以下代码：

<style>
	.cube {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            margin: 100px;
        }
</style>
<div class="cube"></div>
<div class="cube"></div>

运行之后，我们可以看到效果，两个div之间间隔只有100px（正常情况下应该是200px）

修改代码,将各自的div外层包裹一个div，然后再给外层的div加上BFC容器

<style>
    .cube {
        width: 100px;
        height: 100px;
        background-color: deepskyblue;
        margin: 100px;
    }
    .container {
        overflow: hidden;
    }
</style>
<div class="container">
   <div class="cube"></div>
</div>
<div class="container">
    <div class="cube"></div>
</div>

然后再运行，间距则变成了200px

2. 清除浮动
   首先，我们运行一下案例

<style>
    .container {
        border: 1px solid red;
        /* 触发BFC 清除浮动 */
        /* overflow: hidden; */
    }
    .container .cube {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        float: left;
    }
</style>
<div class="container">
   <div class="cube"></div>
</div>

可以看到以下效果：父子关系的情况下，父元素无视浮动元素会产生高度塌陷

修改代码，给外层容器div触发BFC

<style>
    .container {
        border: 1px solid red;
        /* 触发BFC 清除浮动 */
        overflow: hidden;
    }
    .container .cube {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        float: left;
    }
</style>
<div class="container">
  <div class="cube"></div>
</div>

运行看效果：

3. 阻止元素被浮动元素覆盖
   首先，运行以下案例：

<style>
   .float {
       width: 100px;
       height: 100px;
       background-color: red;
       float: left;
   }
   .normal {
       width: 200px;
       height: 200px;
       background-color: blue;
       /* 触发BFC */
       /* overflow: hidden; */
   }
</style>
<div class="float"></div>
<div class="normal"></div>

我们可以看到两个容器有相交，且浮动元素覆盖了普通元素。
接着，我们修改代码，给普通元素加上overflow:hidden；

 .normal {
     width: 200px;
     height: 200px;
     background-color: blue;
      /* 触发BFC */
      overflow: hidden;
 }

再次运行，我们就可以看到两个div互补干扰了