css中如何清除浮動(dòng)

css
小億
75
2023-12-19 05:39:58

在 CSS 中，可以使用 clear 屬性來(lái)清除浮動(dòng)。

常用的清除浮動(dòng)方法有以下幾種：

  1. 使用空的 <div> 元素來(lái)清除浮動(dòng)：

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

    在需要清除浮動(dòng)的父元素上添加 clearfix 類，使用 ::after 偽元素，并設(shè)置 content 為一個(gè)空字符串，display 為 table，clear 為 both。

  2. 使用 overflow: hidden 屬性來(lái)清除浮動(dòng)：

    .clearfix {
  overflow: hidden;
}

    在需要清除浮動(dòng)的父元素上添加 clearfix 類，并設(shè)置 overflow 為 hidden。

  3. 使用 clearfix 類庫(kù)來(lái)清除浮動(dòng)：

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  *zoom: 1;
}

    在需要清除浮動(dòng)的父元素上添加 clearfix 類，并在 CSS 文件中添加上述的 clearfix::after 和 .clearfix 的樣式。同時(shí)，為了兼容老版本的 IE 瀏覽器，可以使用 *zoom: 1; 來(lái)觸發(fā) IE 的 hasLayout 屬性。

以上是常用的幾種方法來(lái)清除浮動(dòng)，可以根據(jù)實(shí)際情況選擇合適的方法。

0 踩