BFC、IFC是什么

BFC块级格式化上下文

其容器内排列规则如下

• 纵向一个挨着一个排列
• 两个盒子的纵向间距由margin属性决定,相邻盒子的margin会有重叠现象,此时间距值取较大的margin

BFC可以看作一个独立的布局环境,容器内的元素和容器外的元素布局互不影响

BFC可以包含浮动元素

清除浮动效果;BFC会排斥外部浮动元素,让浮动元素和块级元素不再有重叠

IFC行内格式化上下文

布局规则

• 水平方向,子元素从左到右排列,空间不够时换到下一行
• 垂直方向,子元素按不同形式对齐
• 子元素只会计算横向样式空间,不会计算垂直方向样式空间(padding,border,margin)
• 能把一行上的框都包含进去的矩形区域称为该行的行框(line box),其宽度是由包含块和其中的浮动决定的
• IFC中的line box左右边一般紧贴其包含块,但有float元素优先排列

当行框内的行内元素没有占满整行的空间时，他们在水平方向的位置会受到text-align属性的影响。

而当行内元素太长时，会被分割为多行，也就是说这个元素内产生了多个行框排列在一起。此时margin、border、padding都不会在断裂处生效。

满足一下条件时，行框会被当作高度为0的盒子处理：

• 不含文字
• 非white-space: pre | pre-wrap | pre-line
• 不含margin、padding、border值不为零的元素
• 不含在常规流中的元素，如图片、表格之类