css 清除浮动

CSS 中，要清除浮动（clear float），您可以使用clear属性。当父元素包含浮动元素时，可能会导致父元素无法正确包裹浮动元素，从而出现布局问题。以下是几种常见的方法来清除浮动：

1、使用空元素 + 清除浮动：

<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="clearfix">
<!-- 包含浮动元素的父元素 -->
<div style="float: left;">浮动元素 1</div>
<div style="float: left;">浮动元素 2</div>
</div>

在上述示例中，通过在父元素上添加clearfix类，并在其后添加一个空的伪元素::after，并设置clear: both，从而清除浮动。

2、使用清除浮动的类：

<style>
.clear-float {
clear: both;
}
</style>
<div>
<!-- 包含浮动元素的父元素 -->
<div style="float: left;">浮动元素 1</div>
<div style="float: left;">浮动元素 2</div>
<div class="clear-float"></div>
</div>

在这种方法中，您可以在浮动元素后添加一个具有clear-float类的空<div>元素，以清除浮动。

3、使用父元素的伪元素 + 清除浮动：

<style>
.parent::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="parent">
<!-- 包含浮动元素的父元素 -->
<div style="float: left;">浮动元素 1</div>
<div style="float: left;">浮动元素 2</div>
</div>

类似于第一种方法，这里我们将伪元素::after添加到父元素上，并设置clear: both来清除浮动。

这些方法中的任何一种都可以用于清除浮动，具体使用哪种方法取决于您的布局需求和个人偏好。