margin塌陷、margin合并与BFC

一丶什么是margin塌陷

在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding
margin直接接触，就产生了合并。表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象。直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width: 300px;
            height: 300px;
            background-color: #56b829;
            margin-top: 100px;
            margin-left: 150px;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: #330099;
            margin-top: 200px;
            margin-left: 200px;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b">
    </div>
</div>
</body>
</html>

margin塌陷.png

从上图中我们可以看到，水平方向的margin确实是不受影响，但是，b元素的margin-top属性并没有起作用，而且“传递“给了其父元素。
如何解决这种问题，下面有几种方法：

1.给父元素a添加border属性
例如：border: 1px solid blue
2.给父元素a添加padding属性
例如：padding: 1px
3.使父元素a成为一个BFC

问题解决后效果如下

after.png

二丶什么是BFC

上面我们说了，要解决margin塌陷问题，我们可以让父元素a成为一个BFC，那么什么是BFC？

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（接下来要讲的margin合并）
3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算（在bfc中浮动元素可以撑起盒子高度）
如何使得一个元素成为BFC？
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不为visible

三丶margin合并

原理:两个兄弟结构的元素在垂直方向上的margin是合并的
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图

example.gif

如何解决这个问题？
在任意一个元素外套一个div，并使其成为bfc
但在开发中这是很不常用的，因为这样做改变了DOM结构，所以在实际应用时,在margin合并这个问题上,我们一般不用bfc,而是通过只设置上面的元素的margin-bottom来解决距离的问题。

最后编辑于：2018.11.02 17:49:39