1.父子元素margin塌陷问题
子元素设置margin-top作用于父元素时, 会产生margin合并问题. 解决方法是: 给父元素的::before伪元素设置为display:table属性, 其中content属性为必需
<div id="father">
<div id="child"></div>
</div>
#father{
width: 100px;
height: 100px;background-color: red;
}
#child{
height: 50px;
width: 50px;
background-color: green;
margin-top: 50px;
}
#father:before{
content: "";
display: table;
}
2.清除浮动流
防止浮动元素对后续元素的影响, 应该在每一次使用浮动后都清除,所以可以在css文件中定义如下代码, 以后每使用一次浮动,都给该元素添加一个clear类名
.clear:after{
display: block;
content: "";
clear: both;
}