margin-top带来的影响、现象的解释以及6种解决方案

思考：相信大家都遇到这种情况吧？给某个元素设置margin-top时，父元素也跟着往下掉了。

备注：抱歉啦，批注的时候不小心多打了个箭头，

        解释：这个现象并不是bug,会影响一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该喝其文档流中的第一个孩子元素的上边距重叠。

        但是，值得一提的是，只有在firefox和chrome下才会出现这种margin-top绑架父节点的情况，在IE6 7中均显示正常，但这恰恰说明了IE是不符合规范的。

解决方案6种：亲测有效，请小伙伴们自行测试，加深印象。若有其他方案，欢迎补充

      给父亲设置（其中一种就可以啦）：

          .parent{padding-top:0.1px}

          .parent{border:1px solid transparent}

          .parent{overflow:hidden}

          .parent{display:inline-block}

          .parent{float:left}

          .parent{position:absolute}