css-16. BFC和IFC

相关概念

块级元素

CSS属性值display为block、list-item、table的元素

块级盒

每个块级元素都会至少生成一个块级盒，称为主块级盒；一些元素可能会生成额外的块级盒，比如 li ，用来存放项目符号

行内元素

CSS 属性值 display 为 inline、inline-block、inline-table 的元素。

行内盒

所有的非替换元素（ display 值为 inline ）生成的盒都是行内盒

所有的可替换行内元素（ display 值为 inline-block 或 inline-table ）生成的盒称为原子行内级盒

BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的创建

以下情况会创建BFC

• 根元素
• 浮动元素
• 绝对/相对定位元素
• display为inline-block、table-cell、table-caption、flex
• overflow不为visible

BFC的特性

• 内部盒子在垂直方向上，一个个放置
• 内部元素存在margin塌陷现象
• 每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此
• 浮动盒的区域不会和BFC重叠
• 计算BFC的高度是，浮动元素会参与计算

参考