CSS - 高度坍塌和外邊距溢出問題及解決方法

CSS - 高度坍塌和外邊距溢出

高度坍塌

1. 成因

   • 父元素 div 未設置高度
   • 子元素全部設置浮動（float: left | right;），浮動元素 脫離文檔流 且 不占頁面空間
   • 由於父元素為設置高度，高度靠內部子元素撐開，而今子元素全部脫離文檔流，所以此時父元素的高度為 0，給父元素和子元素設置 邊框（border: 1px solid #000;）或者 顯示父元素輪廓（outline: 1px solid #000;），會出現子元素超出了父元素的區域范圍，即為：高度坍塌現象

2. 解決方法

   2.1 根據子元素的最大高度為父元素設置高度

   • 前提是要知道子元素高度

   2.2 父元素也設置為浮動

   • 會影響父元素的兄弟元素，可能破壞原有的頁面布局

   2.3 父元素設置 overflow: auto | hidden; 屬性

   • 只要溢出的內容一律都會被隱藏，可能會隱藏不想被隱藏的部分

   2.4 為父元素增加偽元素（推薦）

   • /**
     	.div-parent 為父元素類選擇器
     	設置 content 為空，父元素最后一個偽元素子元素內容為空
     	clear: both 會清除該元素左右兩端的所有的浮動元素，即該元素在父元素中處於所有子元素的最	  下方，且存在於文檔流中，占頁面空間；父元素識別到該元素將會自適應高度
     */
     .div-parent::after {
         display: table;
         content: "";
         clear: both;
     }
     

外邊距溢出

2. 成因

   • 父元素 div 未設置邊框
   • 第一個子元素設置了上外邊距（margin-top: 10rem;）或者 最后一個子元素設置了下外邊距（margin-bottom: 10rem;）
   • 導致父元素與子元素一起發生相應的偏移的現象，即為：外邊距溢出現象

3. 解決方法

   • 為父元素增加偽元素（推薦）

     /**
     設置外邊距的元素不與父元素直接接觸既不會一起發生偏移
     而父元素前或后添加的偽元素子元素 content 為空，所以不會出現不希望看到的效果
     /
     /* 上外邊距溢出 /
     .div-parent::before {
     display: table;
     content: "";
     }
     /* 下外邊距溢出 */
     .div-parent::after {
     display: table;
     content: "";
     }