BFC、IFC

2024-11-27

BFC

块级格式化上下文(Block formatting contexts)。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

内部的box会在垂直方向一个个排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（塌陷），与方向无关。margin 水平方向不会发生重叠
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明 BFC 中子元素不会超出他的包含块，而 position 为 absolute 的元素可以超出他的包含块边界）
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

根元素，html元素本身就是BFC
浮动元素：float属性不为none（脱离文档流）
绝对定位元素：position 属性为 absolute 或 fixed (绝对与固定定位)
非块级盒子的块级容器：display 属性为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid、flow-root(最佳，无副作用) ，定义成块级的非块级元素
overflow 属性不为 visible（- overflow: auto/ hidden)，非溢出的可见元素

这些元素创建了BFC

利用 BFC 的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。BFC 的区域不会和浮动区域重叠，所以就可以把侧边栏固定宽度且左浮动，而对右侧内容触发 BFC，使得它的宽度自适应该行剩余宽度。

让两个元素不在同一个BFC中即可解决

我们在给子元素设置了float: left|right之后父元素会坍塌，所以清除浮动需要解决的问题就是让父元素的高度恢复正常。而用 BFC 清除浮动的原理就是：计算 BFC 的高度时，浮动元素也参与计算。 只要触发父元素的 BFC 即可，如设置overflow:hidden。

内联格式化上下文（Inline Formatting Context)

IFC 的形成条件非常简单，块级元素中仅包含内联级别元素，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC。

子元素在水平方向上一个接一个排列，在垂直方向上将以容器顶部开始向下排列
节点无法声明宽高，其中 margin 和 padding 在水平方向有效，在垂直方向无效
节点在垂直方向上以不同形式对齐
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的线盒（line box）。线盒的宽度是由包含块（containing box）和与其中的浮动来决定
IFC 中的 line box 一般左右边贴紧其包含块，但 float 元素会优先排列。
IFC 中的 line box 高度由 line-height 计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同
当内联级盒子的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性值来决定
当一个内联盒子超过父元素的宽度时，它会被分割成多盒子，这些盒子分布在多个 line box 中。如果子元素未设置强制换行的情况下，inline box 将不可被分割，将会溢出父元素。

当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。

创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align: middle，其他行内元素则可以在此父元素下垂直居中。

‍