现象:
当两个空的块级元素嵌套时,如果内部的块元素设置有margin-top属性时,而且父元素没有下边解决方法所述的特征,那么内部块元素的margin-top属性就会绑架父元素(即---将margin-top传递并凌驾给了父元素)。
比喻:
比作一个小兵,看到上级有漏洞,就假传圣旨,利用漏洞扩张自己的权利。只要给父元素设置border(栅栏)或者padding(隔离墙),就能管住这个调皮的下属。
代码:
<style>
.parent{
width:500px;
height:300px;
background:teal;
}
.box{
width:100px;;
height:100px;
background:aqua;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">
</div>
</div>
</body>
测试结果:大家可以看到,父元素并没有设置margin-top,但是显示的结果说明父元素应用了子元素的margin-top的值,这就是子标签绑架父标签。
解决方法:
1.设置父元素或者自身的display:inline-block;
.parent{
width:500px;
height:300px;
background:teal;
display: inline-block;
}
图片A:这样就解决了这种问题
2.设置父元素的border:1px solid aqua;
.parent{
width:500px;
height:300px;
background:teal;
border:1px solid aqua;
}
见图片A
3.设置父元素的padding:1px;
.parent{
width:500px;
height:300px;
background:teal;
padding:1px;
}
见图片A
4.给父元素设置overflow:hidden;
.parent{
width:500px;
height:300px;
background:teal;
overflow:hidden;
}
见图片A
5.给父元素或者自身设置position:absolute;
.box{
width:100px;;
height:100px;
background:aqua;
margin-top: 50px;
position:absolute;
}
见图片A
综述:这个现象并不是bug,而是有理论依据的:
<<on having layout>>小编建议在空闲时可以阅读一下。
hasLayout (Windows Internet Explorer渲染引擎的一个内部组成部分)会影响一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框,那么他的上边距应该和其文档流中的第一个孩子元素的上边距重叠。但值得一提的是,只有在FF和Chrome这两种浏览器下才会出现这种margin-top绑架父节点的情况,在 IE6 IE7 中均显示正常(读者可以去试一下)。但这恰恰说明了他们是不符合规范的,而FF和Chrome这两种浏览器则是严格遵守规范的。