日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

引言

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

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

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

缺點(diǎn)：

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

2. 在浮動(dòng)元素后面添加空 div（?不推薦）

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

缺點(diǎn)：

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

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

.parent {
  overflow: hidden;
}

缺點(diǎn)：

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

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

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

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

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

優(yōu)點(diǎn)：

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

總結(jié)

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

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