BFC与垂直外边距折叠

BFC

BFC是什么（Block formatting contexts）

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

盒元素在正常文档流中属于一个上下文环境, 也许是BFC也许是IFC, 但只能唯一, 块级盒参与BFC的运算, 内联盒参与IFC的运算。由此可以看出, BFC实为一种环境, 块级元素, 内联级元素参与到各自的formatting contexts中, 依据各自的规则排序。

Block formatting contexts 的规则以及为什么会发生外边距折叠

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (althougha box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

1.浮动元素和绝对定位元素, 非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions）, 以及overflow值不为“visiable”的块级盒子,
都会为他们的内容创建新的BFC（块级格式上下文）。
2.在BFC中, 盒子从顶端开始垂直地一个接一个地排列, 两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中, 两个相邻的块级盒子的垂直外边距会产生折叠。（发生折叠的关键）
3.在BFC中, 每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说, 则触碰到右边缘）甚至对于浮动元素也是如此, （尽管其内部的lineboxes因浮动也许会塌陷）除非box形成BFC（对于float元素足够狭窄）=>此句不明所以。

发生条件

1.两margin相邻, 中间无任何间隔包括包含padding, boarder, line-box, clearance(clear属性)； 2.在定位规则为正常文档流中的块级盒(非float, 绝对定位), 且在同一BFC；
3.方向垂直(margin-top,margin-bottom)；

相邻的三种情况(兄弟, 父子, 自身)；

1.兄弟：兄margin-bottom与弟margin-top;
2.父子：父margin-top与长子margin-top, 父margin-bottom, 幺子margin-bottom;
3.自身：margin,border,padding,width只有margin的情况, 且内部无间隔包括line-box,
margin-top与自己的margin-bottom;

折叠规则

同正, 同负取绝对值最大值。一正一负则正负相加。

由发生条件推出的避免折叠方法

1.改变其盒模型, display:inline-block;
2.改变其定位方案, float, positon:absolute;
3.使其不在同一BFC下,如父创建BFC则父参与爷创建的BFC环境, 子参与由父创建的BFC环境,
使父子不在同一BFC环境下;但兄弟节点之间则无效, 因为即便兄创建BFC环境,
兄弟之间依然参与由父创建的BFC。 4.子元素添加clear属性。
5.添加padding,border,line-box...
总之,改变1,2,4,5可避免任何折叠, 而3只能避免与子元素发生折叠。

以下举例说明

外边距折叠

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>外边距折叠</title><style>* {margin: 0;}div.up {width: 100px;height: 100px;background: #74B9A8;margin-bottom: 100px;/* overflow: hidden; *//* 不可以避免折叠 *//* display: inline-block; *//* 可以避免 *//* 不发生折叠的触发因素是浮动元素、inline-block 元素、绝对定位元素, 这个只是创建BFC因素的子集, 但并不能说明创建了BFC的元素就不会发生折叠, 因为BFC还可以用overflow:hidden来创建。相反如果父元素形成了BFC, 那么他的块级子元素之间反而会发生折叠。 */}div.down {width: 50px;height: 50px;background: #FCFBD0;margin-top: 50px;}div.outter {width: 200px;height: 200px;background: #685D6A;margin-top: 200px;/* overflow: hidden; *//* 可以避免 *//* 形成BFC既可避免与其子元素发生折叠。 */}div.inner {width: 100px;height: 100px;margin-top: 100px;background: #F4828C;}</style></head><body><!-- 什么时候会崩塌, 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠 --><!-- 关键词「两个或多个」「毗邻」「块元素<垂直>方向」 --><!-- 折叠后的大小：全为正书或负数, 取绝对值最大的；一正一负取和 --><div class="up"></div><div class="down"></div><!-- div.up 和 div.down 互为兄弟元素（毗邻）, 即使不在同一BFC中, 也会发生折叠。元素形成BFC之后只能避免父块级元素与其子块级元素发生折叠。 --><div class="outter"><div class="inner"></div></div><!-- outter与inner是父子关系, 再次强调outter形成BFC只可避免与子发生折叠, 但其子元素之间可能会发生折叠。 --></body>
</html>
复制代码

参考： CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

www.html-js.com/article/2882

转载于:https://juejin.im/post/5aa52dae6fb9a028c8127c83