437 阿裏雲技術社區[雲棲]

CSS中越界問題經典解決方案

8.CSS相關知識

(1)如何解決父元素的第一個子元素的margin-top越界問題

　　1)為父元素加border-top: 1px;——有副作用

　　2)為父元素指定padding-top: 1px;——有副作用

　　3)為父元素指定overflow:hidden;——有副作用

　　4)為父元素添加前置內容生成——推薦使用

　　.parent:before {

　　　　content: ' ';

　　　　display: table;

　　}

(2)如何解決所有的子元素浮動後父元素高度變為0，且影響後續元素

　　1)為父元素指定overflow:hidden;——有副作用

　　2)為父元素指定高度：height: xxx;——有局限性

　　3)為父元素添加後置內容生成——推薦使用

　　　　.parent:after {

　　　　　　content: ' ';

　　　　　　display: table;

　　　　　　clear: both;

　　　　}

最後更新：2017-11-05 11:04:05