每天一道面试题 CSS1、BFC --2020-11-02

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

在解释什么什么是 BFC 之前，我们需要先知道 Box、Formatting Context 的概念

Box：CSS 布局的基本单位

Box 是 CSS 布局的对象和基本单位，直观来说，一个页面有很多个 Box 组成的。元素的类型和 display 属性，决定了这个 box 的类型。不同的 box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此 box 内的元素会以不同的方式渲染。

常见盒子：

1.block-level box：display 属性为 block，list-item，table 的元素，会生成 block-level box
2.inline-level box：display 属性为 inline，inline-block，inline-table 的元素，会生成 inline-level box
3.run-in box：css3 特有

BFC 布局规则

-内部的 Box 会在垂直方向一个接一个地放置
-Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
-每个盒子（块盒与行盒）的 margin box 的左边，与包含块 border box 的左边相接触，即使存在浮动也是如此
-BFC 的区域不会与 float box 重叠
-BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素。反之也是如此
-计算 BFC 的高度时，浮动元素也参与计算

如何创建BFC?

1.根元素
2.float属性不为none
3.position不为static和relative
4.overflow不为visible
5.display为inline-block, table-cell, table-caption, flex, inline-flex

BFC作用

1.防止外边距重叠。
bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)
我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。
2.清除浮动的影响
块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。
原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开。
解决方法：由第六条原理得，计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为bfc
就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的
子元素，在这个BFC，这些元素将会回到页面的常规文档流。
3.防止文字环绕