CSS margin塌陷问题及解决方案

1.      什么是margin塌陷问题。

在标准文档流中，垂直方向的父子元素，当给子元素设置margin-top: 100px时，子元素不会相对父元素顶端距离100个像素，而是父子元素同时相对文档下移100px。或则同时给父子两个元素设置margin-top，但是呈现的效果是谁大，父子元素整体像下移动大的距离（此时子元素还是相对父元素不动）。这两种现象我们都称作margin塌陷。

表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象

2.      我们来看一下margin塌陷的具体现象。如下代码：

我们上面的代码本来是想让son这个div距离parent这个元素的顶部100px，parent这个元素应该是距离文档顶部是0。但是表现出来的却是父元素距离顶部100像素，子元素距离父元素的顶部是0。这就是我们所说的父子元素的margin塌陷。我们这里给父元素加个margin-top:200px。呈现的效果如下：

按照我们现在代码的展现形式应该是son节点距离文档顶部应该是300px。parent节点距离顶部200px。但是最终呈现出来的却是parent和son节点都是距离顶部200px。

3.      解决方法。

方法一：给父元素加上边框border:1px silod black;（改变了父元素的结构）。代码和效果如下：

但是加了这个之后，整个父元素可以存放的内容空间只有198个像素了。

方案二：给父元素加上绝对定位。position:absolute。效果如下：

方案三：display:inline-block;让父级同时具有行级属性和块级属性。代码如下：

       方案四：float:left/right;让父级产生浮动流。代码：

方案五：overflow:hiddle;溢出部分隐藏。如下：

4.      总结：方案二到方案五的解决方案我们叫做“触发盒子的BFC模型”。什么是BFC模型？

其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。也就是说只有块级元素才有这种说法。（非块级元素，我们也是可以让它变成块级元素）BFC具有如下的特性：

1.   内部的box会在垂直方向，一个接一个的放置

2.   每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）

3.   box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠

4.   bfc的区域不会与浮动区域的box重叠

5.   bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的

6.   计算bfc高度的时候，浮动元素也会参与计算

5.      下面我们再来看看margin合并的问题。主要表现在兄弟两个元素上面。上面一个元素设置了margin-bottom，下面一个元素设置了margin-top。但是两个元素垂直距离并不是两个margin之和而是取其中一个。具体看下面的代码：

这两个元素垂直方向的距离只会在margin-top和margin-bottom两者取其中一个较大值。这就是我们所说的margin合并现象。

6.      解决方案。

1.      给son2元素加一个父级元素，并给这个父级元素设置上面方案二到方案五其中一个。如下：

2.      给这两个子元素都在加个父元素。并给这两个父元素设置上面方案二到方案五其中一个。代码如下：

7.      总结。上面的解决方案都改变了文档的结构。一般是不建议采用。如果万一我们确实需要两个兄弟元素垂直相距这么大的距离，我们只需要给其中一个设置margin属性就行了。比如给上一个设置margin-bottom属性或者是给下面的元素设置margin-top属性。