国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园

引言

在使用 float 進(jìn)行布局時，常常會遇到父元素高度塌陷的問題。高度塌陷指的是由于子元素浮動后，父元素?zé)o法正確計算高度，從而影響布局結(jié)構(gòu)。本文將介紹幾種常見的清除浮動方法，并分析它們的優(yōu)缺點。

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

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

缺點：

• 需要手動調(diào)整高度，適配性差。
• 無法動態(tài)適應(yīng)內(nèi)容高度，維護(hù)困難。
• 若內(nèi)容變化，需要不斷調(diào)整。

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

<div class="parent">
  <div class="child" style="float: left;">內(nèi)容</div>
  <div style="clear: both;"></div>
</div>

缺點：

• 需要額外的 HTML 結(jié)構(gòu)，增加冗余代碼。
• 不符合語義化原則，影響代碼可讀性。
• 可能對 SEO 產(chǎn)生負(fù)面影響。

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

.parent {
  overflow: hidden;
}

缺點：

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

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

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

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

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

優(yōu)點：

• 不會影響頁面布局，不增加額外的 HTML 結(jié)構(gòu)。
• 兼容性好，適用于所有現(xiàn)代瀏覽器。
• 可維護(hù)性高，適合響應(yīng)式設(shè)計。

總結(jié)

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

轉(zhuǎn)自https://juejin.cn/post/7482988000948584484