HTML+CSS踩过的坑

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;
    }