處理高度塌陷和父子元素外邊距重疊的問題
阿新 • • 發佈：2018-12-26
1.高度塌陷
不太瞭解高度塌陷的兄弟姐妹可以先看看這 https://blog.csdn.net/lw277232240/article/details/80722283這裡有講解高度塌陷，也有解決方案
2.子父元素外邊距重疊。
指的是。當子元素設定外邊距的時候。父元素沒有設定外邊距。那麼子元素設定的按個外邊距。會使得兩個元素一起移動。
解決方法：隔開字元元素即可。也就是在要設定外邊距的元素的前面新增一個哥哥元素。使得子元素的外邊距，被哥哥元素擋住了，而沒有伸出去。這樣就避免了重疊問題。
3.同時解決以上兩個問題
為出現高度塌陷和子父元素重疊問題的父元素新增class ="cleaerfix"；
然後通過偽類選擇器
.clearfix:after,.clearfix:before{
/*在元素的前面新增一個空元素*/
content:="";
/*將元素轉換成表格*/
display:table；
/ *清楚浮動產生的影響*/
clear:both;
}
通過這樣，即可同時解決兩個問題