clear-fix清除浮动的两种写法

清除浮动的两种写法是使用空元素和使用伪元素。

1. 使用空元素： 在浮动元素的父元素的闭合标签前，插入一个空的 <div> 元素，并给它添加一个特定的类名，比如 clearfix。然后在 CSS 中为这个类名设置样式，包括清除浮动的属性。

HTML:

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

CSS:

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

2. 使用伪元素： 直接在浮动元素的父元素上使用伪元素 ::after，并为其添加样式，包括清除浮动的属性。

HTML:

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

CSS:

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

这两种写法都能实现清除浮动的效果，选择哪一种取决于个人的喜好和项目的要求。