HTML——BFC

背景

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取决于浏览器的标准和不一样的文字的标准，毕竟英文和中文对应的就不同。

参考

一、BFC
二、line-height