css 如何清除浮动的示例代码

清除浮动是指解决浮动元素对后面的元素造成的影响，一般使用 clear：both 来清除浮动，但有时会产生新的问题，因此需要使用其他的方法来清除浮动。

清除浮动的方式

1. 通过定义父元素的高度来进行清除浮动，例如：

<div style="overflow: hidden;">
  <div style="float: left;">Left</div>
  <div style="float: right;">Right</div>
</div>

通过在父元素 div 中使用 overflow: hidden; 来使得父元素包含了所有浮动元素，从而清除了浮动。

1. 使用伪元素来清除浮动，例如：

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

在父元素的 class 中添加 clearfix 类，然后使用 ::after 伪元素在父元素的最后添加空的 content，将 display 设置为 block，并使用 clear: both 来清除浮动。

示例说明

示例一

<div style="overflow: hidden;">
  <img src="image.jpg" style="float: left;">
  <p>这是一段文字</p>
</div>

在这个例子中，我们使用了第一种方式清除浮动，通过在父元素 div 中使用 overflow: hidden; 来清除浮动。

示例二

<div class="clearfix">
  <img src="image.jpg" style="float: left;">
  <p>这是一段文字</p>
</div>

在这个例子中，我们使用了第二种方式清除浮动，通过在父元素的 class 中添加 clearfix 类，并使用伪元素 ::after 来清除浮动。

以上是清除浮动的示例代码和攻略，如有不清楚的地方可以继续进行讨论。