如何消除子容器的margin-top给父容器造成的合并margin影响。

我们都知道，在CSS的盒模型中，当子容器设置了margin-top之后，父容器也会受到相应的影响，如下图所示，这是我们部门新来的一个员工写的页面，然后碰到了这个问题：

要解决这种情况，通常情况下我们会采用父容器的padding属性来替代子容器的margin属性。那么，有没有别的办法可以解决这个问题呢？

答案是有的！

我们发现此时的父容器并没有使用border属性或padding属性，可是当我们加上这两个属性中的某一个之后，上面所说的这种现象消失了！！更直接的说起作用的应该是padding-top或border-top-style 这两个属性。

如上两图所示。当我们使用border或padding中的任意一个属性时，这种现象就消除了。

但是border-top或padding-top宽度必须至少1像素才行。

于是，利用css盒模型的特点，我们可以将父容器的高度减1像素，padding-top加1像素或border-top设置为1像素即可。

补充：上面说的这种解决方案并非最合适，最近看了下BFC相关规范，突然联想到这个问题，原来只需要对外层容器触发BFC布局即可。触发BFC方式有很多，这里最恰当的应该是overflow:hidden了。