[聚合文章] [前端回顾]CSS BFC

CSS BFC(Block Formatting Context)是网页渲染的一个重要原则，而又常常被忽视或注意不到，所以这里来回顾一下BFC是什么。

什么是BFC

BFC是块级格式化上下文，是指一个独立的块级渲染区域，用来定义块级元素的渲染布局规则，每个区域与外部是隔离的，内部的元素不会受到外部的影响。

如何产生BFC

根据 MDN 的说明：

根元素或其它包含它的元素

浮动元素 (元素的 float 不是 none)

绝对定位元素 (元素的 position 为 absolute 或 fixed)

内联块 (元素具有 display: inline-block)

表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)

表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)

具有overflow 且值不是 visible 的块元素，

display: flow-root

column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。 ``

BFC内部的渲染布局规则及功能

• 1、内部的元素会在垂直方向一个接一个地排列，可以理解为是BFC中的一个常规流

• 2、元素垂直方向的距离由margin决定，即属于同一个BFC的两个相邻盒子的margin可能会发生重叠

• 3、每个元素的左外边距与包含块的左边界相接触(从左往右，否则相反)，即使存在浮动也是如此，这说明BFC中的子元素不会超出它的包含块

• 4、BFC的区域不会与float元素区域重叠

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

• 6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

一些应用与解释

外边距合并

又称外边距重叠或者外边距塌陷，即BFC内相邻两元素的margin会发生合并，并且合并为两者中较大的那一个。这就是我们常常遇到了设置了相邻元素的上下margin，但是两者之间的距离并非直接加和而是取margin最大值的原因。

自适应左右布局

常见的左缩略图，右文本的结构，文本自动向右收缩以提供图片的空间。