【CSS】深入理解：BFC究竟是什么?

深入理解：BFC究竟是什么？

在我们了解BFC之前，我们先来看看什么是FC

1. FC的概念

FC全称 Formatting Context ,元素在标准流里面都属于一个FC

块级元素的布局都属于Block Formatting Context,也就是BFC
- block level box都是在BFC中布局的
行内级元素的布局都属于Inline Formatting Context，IFC

2. BFC - Block Formatting Context

2.1 什么是BFC呢？怎么创造BFC？

常见的形成BFC的场景

根元素（html,:root）
浮动元素（float属性部位none）
绝对定位元素（absolute或fixed）
行内快元素（display为inline-block）
表格单元格（元素的display为table-cell(默认)）
表格标题（display为table-caption）
匿名表格单元格格式（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
overflow属性值不是"visible"的元素
弹性元素（flex布局）
网格元素（gird布局）

2.2 BFC的作用

在BFC中，box会垂直方向上一个挨着一个排布
垂直方向的属性由magin决定
同一个BFC中，两个相邻的box上下之间的margin会折叠（规定）
BFC中，每个元素的左侧边缘都是紧挨着包含块的左边缘

这就是浏览器如何排布我们的元素

2.3 利用BFC解决块级元素的margin上下折叠问题

css 复制代码

.box {
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: pink;
  margin-bottom: 50px;
}
.box2 {
  margin-top: 30px;
  background-color: purple;
}

html 复制代码

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

在上述的代码中，box1和box2在同一个BFC中，（根元素html）会创建一个BFC，所以会折叠，两个box之间的距离为50px,我们可以利用BFC来解决这个问题

html 复制代码

<div class="container">
  <div class="box box1"></div>
</div>
<div class="box box2"></div>

用一个div盒子来包裹box1

css 复制代码

.container {
  overflow: auto;
}

当我们给box1的父盒子container设置overfolw的属性为auto时，此时container会开启一个BFC，此时，box1和box2并不是属于同一个BFC，所以不会出现margin上下折叠的问题

2.4 为什么BFC会解决浮动元素高度塌陷的问题呢？

网上有很多的说法，BFC可以解决浮动元素的塌陷问题，实现清除浮动的效果，那么请看这个案例

html 复制代码

<!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>
      ul,
      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }

      .box ul {
        width: 330px;
        height: 150px;
        background-color: orange;
        overflow: hidden;
      }
      .box li {
        float: left;
        width: 100px;
        height: 100px;
        margin: 0 10px 10px 0;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </body>
</html>

在这个案例中，我们给了ul 一个固定高度，也给ul设置了一个BFC，但并没有清除浮动

事实上，BFC解决高度塌陷的需要满足两个条件

浮动元素的父元素开启BFC
浮动元素的父元素高度是auto

当BFC的高度为auto时，将会计算父元素的高度（权威）

如果盒子中的子元素只有行内元素，直接计算顶部到底部的距离
如果有块级元素，计算块级元素的高度
如果有绝对定位元素，直接忽略其高度
如果有浮动元素，则会增加高度来包含这些浮动元素的下边缘

也就是我们可以得出一个重要结论，当元素开启新的BFC时，会主动将浮动元素给包括进去，并不是浮动元素向父元素汇报高度