溫馨提示×

clear-fix清除浮動的兩種寫法

小億
141
2023-12-18 16:25:49
欄目: 編程語言

清除浮動的兩種寫法是使用空元素和使用偽元素。

  1. 使用空元素： 在浮動元素的父元素的閉合標(biāo)簽前，插入一個空的 <div> 元素，并給它添加一個特定的類名，比如 clearfix。然后在 CSS 中為這個類名設(shè)置樣式，包括清除浮動的屬性。

HTML:

<div class="clearfix">
  <!-- 浮動元素 -->
</div>

CSS:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  1. 使用偽元素： 直接在浮動元素的父元素上使用偽元素 ::after，并為其添加樣式，包括清除浮動的屬性。

HTML:

<div class="parent-element">
  <!-- 浮動元素 -->
</div>

CSS:

.parent-element::after {
  content: "";
  display: table;
  clear: both;
}

這兩種寫法都能實現(xiàn)清除浮動的效果，選擇哪一種取決于個人的喜好和項目的要求。

0 踩