BFC块级格式上下文简述

在了解BFC之前，先了解两个概念：

• box就是盒模型。box是css布局的对象和基本单位，说白了就是咱们网页布局的基石，简单来说一个页面是由很多box（盒模型）组成的。

• 元素的类型也就是display属性。元素的类型和display属性决定了这个 Box的类型。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器-人话就是网页布局的一个范围），因此Box内的元素会以不同的方式渲染（显示）。

概念：BFC全称Block Formatting Context ，中文直译为块级格式上下文。它是W3C （https://www.w3.org/） CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

BFC布局规则

• 在BFC下，内部的Box会在垂直方向，一个接一个地放置。

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

• 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器（父元素）的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。

• BFC的区域不会与float box重叠。例子：两个div，一个进行浮动，一个不浮动，这时浮动的元素会覆盖没有浮动的元素。给没有浮动的元素加overflow：hidden。就不会重合。

• 计算BFC的高度时，浮动元素也参与计算

如何触发 BFC

• 浮动元素，float 除 none 以外的值

• position的值不为static或者relative

• display为inline-block、table-cell、table-caption

• overflow 除了 visible 以外的值

BFC的应用

• 解决浮动塌陷问题

• 自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）

• 解决设置margin值重叠问题。

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。