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