91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

引言

在使用 float 進行布局時，常常會遇到父元素高度塌陷的問題。高度塌陷指的是由于子元素浮動后，父元素無法正確計算高度，從而影響布局結構。本文將介紹幾種常見的清除浮動方法，并分析它們的優缺點。

1. 設置父元素高度大于浮動（?不推薦）

.parent {
  height: 200px; /* 手動設置一個大于子元素的高度 */
}

缺點：

• 需要手動調整高度，適配性差。
• 無法動態適應內容高度，維護困難。
• 若內容變化，需要不斷調整。

2. 在浮動元素后面添加空 div（?不推薦）

<div class="parent">
  <div class="child" style="float: left;">內容</div>
  <div style="clear: both;"></div>
</div>

缺點：

• 需要額外的 HTML 結構，增加冗余代碼。
• 不符合語義化原則，影響代碼可讀性。
• 可能對 SEO 產生負面影響。

3. 使用 overflow: hidden;（?不推薦）

.parent {
  overflow: hidden;
}

缺點：

• 會裁剪超出父元素范圍的內容，不適用于有 position: absolute; 或 fixed; 子元素的情況。
• 無法適用于某些需要滾動的場景，如 overflow: auto;。

4. 使用偽類 ::after（?推薦）

• ::after（雙冒號）是 CSS3 引入的偽元素寫法，專門用于創建虛擬元素。

• :after（單冒號）是 CSS2 的舊語法，雖然仍然可用，但不符合最新的 CSS 規范。`

.parent::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

優點：

• 不會影響頁面布局，不增加額外的 HTML 結構。
• 兼容性好，適用于所有現代瀏覽器。
• 可維護性高，適合響應式設計。

總結

綜上所述，推薦使用 ::after 偽類的方式清除浮動，以確保頁面結構的完整性和代碼的可維護性。在現代 CSS 布局（如 Flexbox 和 Grid）廣泛應用的情況下，盡量減少對 float 的依賴，采用更現代的布局方式。

轉自https://juejin.cn/post/7482988000948584484