标题：CSS 如何清除浮动的示例代码
1. 为什么需要清除浮动
在网页布局中，当元素浮动（float）后，其父元素的高度将会塌陷，导致父元素无法正常包裹浮动元素，从而影响其他元素的布局。因此，我们需要清除浮动来解决这个问题。
2. 清除浮动的方法
2.1. 使用clearfix
clearfix 是一种常用的清除浮动的方法，它通过给父元素添加一个伪类来清除浮动效果。以下是一个示例代码：
.clearfix::after {
content: "";
display: table;
clear: both;
}
在上述代码中，我们使用 clearfix 类来为父元素添加样式，并且使用 ::after 伪类来创建一个额外的内容框，并设置其清除浮动。
重要提示：在使用clearfix 清除浮动时，需要确保父元素拥有足够的空间来包裹浮动元素，否则清除浮动的效果可能无法正常显示。
2.2. 使用clear 属性
另一种清除浮动的方法是使用 clear 属性，通过在浮动元素后面插入一个额外的空的元素，并设置其 clear 属性为 both 或者 left/right 来清除浮动效果。以下是一个示例代码：
.clear {
clear: both;
}
在上述代码中，我们创建了一个类名为 clear 的样式，并设置其 clear 属性为 both。然后，在浮动元素后面添加一个空的 div 元素并应用 clear 类。
2.3. 使用overflow 属性
使用 overflow 属性也可以清除浮动，当我们将父元素的 overflow 属性设置为 auto 或 hidden 时，父元素将会创建一个新的块级格式化上下文，从而清除浮动效果。以下是一个示例代码：
.parent {
overflow: auto;
}
在上述代码中，我们为父元素添加样式，并将 overflow 属性设置为 auto。这样可以清除浮动，并且父元素将能够正常包裹浮动元素。
2.4. 使用BFC（块级格式化上下文）
最后一种清除浮动的方法是使用BFC，当元素触发BFC时，该元素将创建一个独立的布局环境，从而不受外部环境的影响。可以通过为父元素添加一些特定的样式来触发BFC。以下是一个示例代码：
.parent {
overflow: hidden;
}
在上述代码中，我们为父元素添加样式，并将 overflow 属性设置为 hidden。这将触发BFC，并清除浮动效果。
3. 总结
通过本文的介绍，我们了解了四种常用的清除浮动的方法：clearfix、clear 属性、overflow 属性和 BFC。这些方法都能有效地解决浮动元素引起的布局问题。根据实际情况选择合适的方法来清除浮动，以确保网页布局的正确性和稳定性。