背景
BFC,即Block Format Context,块级格式化作用域,我们先不管它的目的是什么,先来了解下格式化作用域的相关类型。
格式化作用域的类型
文档流中的行内元素和块级元素,都属于格式化作用域,所以格式化作用域有两种类型:
- 块级格式化作用域
- 行内格式化作用域
格式化作用域的作用
格式化作用域,规定了当前节点内部的文档流不受外界文档流的影响。 (原因很简单啊,因为除了正常文档流还有其他形式的文档流,比如float、fixed、absolute等方式会脱离当前正常文档流)
说白了就是,html和css的一种约定,如果没有这种约定,浏览器去解析下面的代码
// html
<div class="normal">
<div class="absolute">
<div class="son"></div>
</div>
</div>
//css
.normal {
position: relative;
}
.absolute {
position: absolute;
}
.son {
position: relative;
}
复制代码
对于normal和absolute两个div可以进行正常的解析,那son这个div应该怎么解析这个div?是属于noraml内部的还是absolute内部的?浏览器就不知道怎么办了,而 有了这种约定,就可以讲son解析为absolute的节点,对文档进行更好的解析,然后呈现在浏览器上面。
块级格式化作用域
如何触发块级格式化作用域?
- 浮动元素
- 绝对定位元素
- 不是块状盒子的盒子(比如inline-block/table-cells/table-captions)
- overflow不为visible的元素
块级化格式化作用域内部元素如何排列?
- 盒子从上到下排列
- 盒子的左侧边界挨着父节点的左侧边界
- 盒子之间的垂直距离取决于margin,可能会发生外边距折叠
外边距折叠
外边距折叠也不是一定会发生的,下面两种情况就不会发生折叠:
- 根节点元素的盒子不会折叠(如果这都折叠,那最外层div的margin就无效了)
- 水平元素之间永远不会发生外边距折叠
- 块级元素在当前格式化作用域内部(必须是块级元素,不能是inline-block)
- 清除浮动,没有padding和border分割(border为0无效)
外边距折叠发生的位置
- 父节点和第一个子节点的margin-top
- 子节点的margin-bottom和下一个相邻节点的margin-top
- 如果父节点的高度是自动计算的auto,那么父节点的margin-bottom和其最后一个子节点margin-bottom
总结起来,就是margin可能会在图中3个地方发生折叠:
折叠后margin计算
- margin,都为正,取最大的那一个
- margin,一正一负,两者相加
- margin,都为负,取绝对值最大的那一个
如何避免外边距折叠?
既然外边距折叠发生在图中三个位置,那么我们就看看三个位置不发生折叠的情况
通用情况
- 如果创建了块级格式化作用域
位置1: 父节点和第一个子节点
- 如果父节点具备border和padding,那么就不会发生折叠
- 第一个div 具备clear
位置2: 相邻节点之间
- 详细通用情况
位置3: 父节点和最后一个子节点
- 通用情况
- 父节点没有规定高度,height:auto并且min-height:0
- 如果父节点具备border和padding,那么就不会发生折叠
注意⚠️
如果子节点中有浮动元素,并且其他节点具备clear:both/left/right,那么就会把兄弟元素放在浮动元素的边界下方,但是依然会发生外边距折叠。
行内格式化作用域
如何触发?
行内元素,比如span等等
内部如何排列?
从左到右,不会发生外边距折叠
行内格式化元素的宽度
宽度取决于包含内容的宽度,如果屏幕足够宽,就会把所有的内容一行展示,如果设置了宽度,可能还有overflow,举个例子:
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>
复制代码
浏览器在解析的时候,会解析为下面的几个元素:
Anonymous: "Several"
EM: "emphasized words"
Anonymous: "appear"
STRONG: "in this"
Anonymous: "sentence, dear."
复制代码
但是可能会解析为一个或者几个line-box,浏览器会做对应的分割,
可能是一个line-box:
Several emphasized words appear in this sentence, dear.
复制代码
可能是两个line-box:
Several emphasized words appear
in this sentence, dear.
复制代码
也可能是三个line-box:
Several emphasized
words appear in this
sentence, dear.
复制代码
具体的分割原理是取决于对应的line-height能不能相互平衡。 当然如果你设置了具体宽度,可以设置换行等其他属性,比如white-space/word-break等,这里就不做赘述了。
行内格式化元素的高度
inline的高度取决于line-height,但是inline-block类别的(还有table-cell等),取决于margin等。总结起来一句话就是,line-height的高度是盒子顶点到底部之间的距离。
具体计算
- font-size: 每一个line-box都有一个属性font-size,如果没有设置,使用默认值,或者继承自父节点的值(pc端谷歌浏览器的默认值14px)
- line-height: 规定了line-box的最小高度,也就是line-box的高度
在line-box里面,vertical-align,其中的baseline,就是通过line-height计算得来的,主要包括下面三个部分:
- A(base-line上面的高度)
- D(base-line下面的高度)
- L(line-height — A - D) 最终baseline上面的高度:A + L/2, baseline下面的高度: D + L/2
当然,具体的A和D取决于浏览器的标准和不同的文字的标准,毕竟英文和中文对应的就不一样。