摘要：行框的宽度是由包含块和与其中的浮动来决定。中的高度由行高计算规则来确定，同个下的多个高度可能会不同。当一个超过父元素的宽度时，它会被分割成多个，这些分布在多个中。如果子元素未设置强制换行的情况下，将不可被分割，将会溢出父元素。
IFC
Inline Formatting Contexts，也就是“内联格式化上下文”。
符合以下任一条件即会生成一个IFC块级元素中仅包含内联级别元素
形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC，这里不做过多介绍。
IFC布局规则子元素水平方向横向排列，并且垂直方向起点为元素顶部。
子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素会以不同形式来对齐（vertical-align）
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。
相比较于BFC，IFC的规则噼里啪啦一大堆，很少有人会耐心看下去，举几个例子，花几分钟就可以大概明白其特性。
很多时候，上下间距不生效可以使用IFC来解释.warp { border: 1px solid red; display: inline-block; }
.text { margin: 20px; background: green; }
文本一 文本二
左右margin撑开，上下margin并未撑开，符合IFC规范，只计算横向样式控件，不计算纵向样式空间。
.warp { border: 1px solid red; width: 200px; text-align: center; }
.text { background: green; }
文本一 文本二
水平排列规则根据IFC容器的text-align值来排列，可以用来实现多个子元素的水平居中。
float元素优先排列.warp { border: 1px solid red; width: 200px; }
.text { background: green; }
.f-l { float: left; }
这是文本1 这是文本2 这是文本3 这是文本4
IFC中具备float属性值的元素优先排列，在很多场景中用来在文章段落开头添加“tag”可以用到。
利用IFC还可以做很多其他的事情，例如：解决元素垂直居中、多个文本元素行高不一致排列混乱。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114357.html
摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。 作者：陈大鱼头 github： KRISACHAN 正常流 什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...
摘要：作者陈大鱼头正常流什么是正常流其实就是我们日常所说的文档流。在官方文档里对应的是。然后，包含形成一条线的框的矩形区域称为线盒。基线线盒的高度由的计算结果决定。级层叠上下文被自动视为父级层叠上下文的一个独立单元。自由分配，由具体情况决定。 作者：陈大鱼头 github： KRISACHAN 正常流 什么是正常流？其实就是我们日常所说的文档流。在W3C官方文档里对应的是normal ...
摘要：完整的说法是属于同一个的俩个相邻的的会发生重叠，与方向无关。元素会位于与与之间，使得宽度缩短。简单的说，有了之后，布局不再局限于单个维度了。 什么是FC？ Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context，块级格式...
阅读 2846·2021-11-24 11:14
阅读 3167·2021-11-22 15:22
阅读 3023·2021-09-27 13:36
阅读 526·2021-08-31 14:29
阅读 1146·2019-08-30 15:55
阅读 1607·2019-08-29 17:29
阅读 1024·2019-08-29 16:24
阅读 2236·2019-08-26 13:48
