[前端回顾]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最大值的原因。

自适应左右布局

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