思考:相信大家都遇到这种情况吧?给某个元素设置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}