CSS清楚浮动clear:both的实例代码

清除浮动是Web设计中一个常见的问题。在处理包含浮动元素的容器时，往往会出现高度坍塌等问题，这时需要使用“清浮动”技术来解决。

清除浮动的常用方法之一是使用“clear:both”样式。在下面的示例代码中，我们将通过两种方式来演示如何使用“clear:both”样式进行浮动清除。

示例一：清除浮动的简单方式

首先，我们创建一个包含浮动元素的父容器，并指定其样式为“overflow:auto”以解决高度坍塌问题。

<div id="container" style="overflow:auto;">
    <div class="box" style="float:left;">浮动元素1</div>
    <div class="box" style="float:left;">浮动元素2</div>
    <div class="box" style="float:left;">浮动元素3</div>
    <div style="clear:both;"></div>
</div>

在以上代码中，我们使用了一个空的div元素并为其指定“clear:both”的样式，即可将其下方的所有浮动元素清除浮动。此时，父容器将自动占据浮动元素的高度，避免发生高度坍塌的问题。

示例二：清除浮动的更优方式

清除浮动的示例一虽然能够解决高度坍塌的问题，但是却不够优雅。在示例二中，我们将展示更为优美的浮动清除方式。

<div id="container" style="overflow:auto;">
    <div class="box" style="float:left;">浮动元素1</div>
    <div class="box" style="float:left;">浮动元素2</div>
    <div class="box" style="float:left;">浮动元素3</div>
    <div style="clear:both;"></div>
</div>

在以上代码中，我们创建了一个空的::after伪元素，并为其指定了“clear:both”的样式。通过这种方式，我们可以避免使用空的div元素，从而写出更加简洁优美的代码。

通过上述两种示例，我们了解到了使用“clear:both”样式进行清除浮动的两种方式。根据实际需要来选择一种合适的方式即可解决包含浮动元素的容器高度坍塌问题。