CSS Strut 与 IFC 简析
内容提要
CSS中，父元素建立IFC时，会插入一个隐形strut，其高度由父元素的font-size和line-height决定，导致子元素周围出现意外空白。解决方法是设置父元素font-size和line-height为0，或将子元素改为block，或使用flex/grid布局。CSS有四种格式化上下文：BFC、IFC、FFC和GFC，分别对应块级、行内、弹性及网格布局。
延伸解读
理解 Strut 的机制
Strut 是浏览器在 IFC 中自动插入的隐形文本行，其高度由父元素的 font-size 和 line-height 决定。即使父元素没有直接文本，只要包含行内级子元素，就会生成 strut，导致子元素周围出现额外空白。理解这一机制有助于排查类似布局问题。
解决方案的权衡
文章提供了三种解决 strut 空白的方法：设置父元素 font-size 和 line-height 为 0、将子元素改为 block、或将父元素设为 flex/grid。第一种方法较为 hack，可能影响继承；后两种通过改变格式化上下文，更彻底。选择时需考虑布局需求和兼容性。
格式化上下文的选择
CSS 有四种格式化上下文：BFC、IFC、FFC 和 GFC。BFC 常用于清除浮动和防止 margin 塌陷；FFC 适合一维布局，如导航栏；GFC 适合二维布局，如仪表盘。理解它们的特点，有助于根据布局需求选择合适的上下文，避免不必要的 IFC 问题。
Q&A
CSS中，为什么父元素内只有一个inline-block子元素时，子元素周围会出现多余的空白？
这是因为父元素建立了IFC（行内格式化上下文），浏览器会在父元素内部、子元素前面插入一个隐形的strut。strut的高度由父元素的font-size和line-height决定，即使父元素没有直接文本，它也会撑起父元素的高度，导致子元素周围出现空白。
CSS中的strut是什么？它的高度是如何计算的？
strut是CSS中当父元素建立IFC时，浏览器在父元素内部插入的一个隐形文本行。它的高度由父元素的font-size和line-height决定，例如父元素font-size为42px、line-height为1.5时，strut高度为63px。
如何解决CSS中因strut导致的子元素周围出现空白的问题？
有三种方法：1. 设置父元素的font-size和line-height为0，压制strut；2. 将子元素改为display: block，使其内部重新建立IFC；3. 将父元素设置为flex或grid布局，使子元素成为flex item或grid item，绕开IFC。
CSS中的IFC是什么？它是如何产生的？
IFC是行内格式化上下文（Inline Formatting Context）。当一个块级容器内部直接包含行内级元素时，该容器内部就会产生IFC。例如，父元素是div，子元素是inline-block，就会建立IFC。
CSS中有哪四种格式化上下文？分别对应什么布局？
CSS中有四种格式化上下文：BFC（块级格式化上下文）、IFC（行内格式化上下文）、FFC（弹性格式化上下文）和GFC（网格格式化上下文）。BFC对应块级布局，IFC对应行内布局，FFC对应弹性布局（flex），GFC对应网格布局（grid）。
如何触发BFC？BFC有什么特点？
触发BFC的条件包括：float不为none、position为absolute或fixed、display为inline-block、table-cell、flex、grid或flow-root，以及overflow不为visible。BFC的特点是内部元素垂直排列、外边距不会与外部重叠、能包住浮动元素，也不会被浮动元素覆盖。
为什么将子元素设置为display: block可以解决strut造成的空白问题？
因为当子元素设置为block后，它不再参与父元素的IFC，而是自己内部重新建立IFC，因此父元素不再插入strut，空白问题得以解决。
