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;

　　　　}