BFC与合并浅析

Posted 2020-12-02 evenyao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BFC与合并浅析相关的知识，希望对你有一定的参考价值。

BFC

BFC 全称 Block Formatting Context。
每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文

BFC特性&创建条件

特性

内部的Box会在垂直方向，从顶部开始一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box叠加。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

计算BFC的高度时，浮动元素也参与计算。
——《CSS之BFC详解》

创建条件

块格式化上下文由以下之一创建：

根元素或其它包含它的元素

浮动 (元素的float不是 none)

绝对定位的元素 (元素具有 position 为absolute或 fixed)

内联块 inline-blocks (元素具有display: inline-block)

表格单元格 (元素具有 display: table-cell，html表格单元格默认属性)

表格标题 (元素具有 display: table->caption, HTML表格标题默认属性)

块元素具有overflow ，且值不是 visible

display:flow-root

——MDN - 块格式化上下文

BFC 可以用来做什么？

1. 解决margin重叠的问题

根据BFC的特性，同一个BFC下的两个相邻的盒子会出现垂直margin重叠的问题，这个问题会影响我们对页面布局的控制，通常我们可以为其中一个盒子添加一个父元素，并使其触发BFC，即可解决这个问题：

2. 浮动带来的布局问题

根据前面其他作者总结的BFC特性的第三条和第四条，我们知道在同一个BFC下即使有元素浮动，BFC下元素的最左边边缘总是会与包含它的盒子左边相接触，那么就会出现浮动元素遮盖了其他元素的情况。BFC还有一条重要特性：BFC的区域不会与float box 重叠。试想，在一个BFC，如果存在一个float元素，和一个div，浮动元素会遮盖住div，此时，如果给这个div构建一个新的BFC，由于BFC特性，内外不相互影响，此时div会被float元素挤开。

比如下面这个例子，绿色盒子会因为浮动遮盖住红色的盒子，但由于两个盒子都在同一个BFC（body元素）下，根据BFC特性，红色盒子会与包含块相接，此时只要让红色盒子触发BFC，我们为红色盒子添加一个触发BFC的条件overflow:hidden，此时红色盒子由于BFC的特性隔离开绿色，这样我们就可以通过float元素的方式实现两栏布局。

3. 清除浮动

这里就要说到我们常见的浮动元素引起的高度坍塌的问题。由于浮动特性，浮动元素会脱离父元素，我们是否可以通过触发BFC来解决高度坍塌的问题呢？

根据特性的第6条，在触发BFC后，这个盒子的高度将包含浮动元素的高度，在计算时，浮动元素会参与高度计算，我们可以理解为，当一个父元素中包含了浮动元素，而浮动元素超出了父元素，此时我们为父元素创建BFC，那么浮动元素就会包裹进这个BFC解决了父元素中高度塌陷的问题。

如下面的例子，div.parent包含了两个div.child，而两个div由于赋予了float:left使其浮动，导致了div.parent高度的坍塌，此时我们给div.parent添加一个overflow:hidden属性值，使div.parent触发BFC，由于BFC下的盒子会包含浮动元素的高度，因此盒子就被撑了起来，高度塌陷的问题也就得到了解决。

关于合并

在什么场景下会出现外边距合并？

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

当两个盒子的外边距均为正时，折叠外边距取外边距更大的那个；
当两个盒子的外边距均为负时，折叠外边距取外边距绝对值更大的那个；
当两个盒子的外边距一正一负时，折叠外边距取两个外边距值的和。

如何合并？

产生合并的必备条件：margin必须是邻接的!

而根据w3c规范，两个margin是邻接的必须满足以下条件：

1.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
2.没有线盒，没有空隙（clearance），没有padding和border将他们分隔开
3.都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
- 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
- height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
- 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则：

1.创建了新的BFC的元素（例如浮动元素或者overflow值为visible以外的元素）与它的子元素的外边距不会折叠
浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
2.绝对定位元素不与任何元素的外边距产生折叠
inline-block元素不与任何元素的外边距产生折叠
3.一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。因此使用单边margin可以预防外边距合并现象。
4.一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
5.一个 ‘height‘为‘auto‘并且‘min-height‘为 ‘0‘的常规文档流元素的margin-bottom会与其最后一个常规文档流子元素的margin-bottom 折叠，条件为父元素不包含 padding和 border，子元素的 margin-bottom不与包含clearance 的 margin-top 折叠。
6.一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其‘height‘为 0或‘auto‘，‘min-height‘为 ‘0‘，其里面也不包含行盒(line box)，其自身的 margin-top和 margin-bottom 会折叠。