IFC布局特点

Posted 2020-10-07 炎泽

IFC(inline formatting context),行内格式化上下文

特点:

1.内联元素在水平线上一个接一个排列

2.内部元素水平方向上的margin、padding、border有效，垂直方向上无效

3.垂直方向上有多种对齐方式: 顶部、底部、基线。。

4.每一列元素构成一个line box，line box的宽度由包含其元素的宽度及有没有float元素决定，高度由内部最高元素决定

5.line box的高度足以包含其内部容器，也肯比他们都高(例如基线对齐)，内部容器的垂直位置由其vertial-align决定

6. 一般情况下，line-box的左/右边缘挨着包含其的元素的左/右边缘，但若有浮动元素，会插入左/右边缘之间

7.当line box足以包含其所有子元素，子元素的排列方式由text-align决定

8.当line box内部元素宽度超出line box宽度，此行内框会被分割，且在被分割不为没有视觉效果，若不可分割，则溢出/打断