BFC与IFC浅析

BFC和IFC

• 都是针对Box设计的formating content

• css渲染时以box为基本单位，box的类型由元素的类型和display的值决定。box分为block-level box和inline-lever box

• formating content：不同渲染区域遵循的规则

BFC--块级格式化上下文

什么时候形成？

• overflow不为visible

• float不为none

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

• 根元素

BFC特性

• 区域内部的块级元素在垂直方向上，一个接着一个的放置

• 区域不会与浮动元素重叠

• 元素之间的距离，由垂直方向的margin决定

• 区域内部计算高度时，浮动元素也纳入计算

• 是一个页面上隔离的容器，内部与外部互不影响

IFC--行内格式上下文

• inline元素和inline-block元素符合IFC的布局规范

特性

• 区域中，内联元素在水平方向上一个接一个地放置。

• 其中，水平方向上的margin, padding, border是有效的。但垂直方向上无效

• 一个水平行中的所有行内块组成了名为line box 行框的矩形区域

• line box的高度由其包含的元素的最高高度计算得到。有时候会高于最高元素，比如基线对齐时。当line box高度大于其中元素高度，其中的元素在垂直方向上的排列由vertical决定

• 宽度由包含它的元素的宽度和包含它的元素中是否有浮动元素决定的。如果包含它的元素足够宽，line box的水平排布由text-align决定，否则会将line box截断并换行。如果line box无法截断，如果单词过长或指定不换行，会溢出容器。