CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器

让我来详细讲解一下使用 CSS 清除浮动的技巧。

让我来详细讲解一下使用 CSS 清除浮动的技巧。

什么是清除浮动？

在 CSS 中，当一个元素设置浮动后，它将会从文档的正常流中脱离出来，可能导致包含该元素的父元素无法正确地计算高度，使得页面布局混乱。因此需要使用清除浮动的技巧，让包含浮动元素的父元素能够正确地计算高度。

使用伪元素清除浮动

最常用的清除浮动的方法是使用 clear: both;，然而这种方法会添加一个空元素，不利于语义化标记以及 SEO。因此出现了另外一种方法，即使用伪元素（pseudo-element）清除浮动。

清除浮动的伪元素通常是在包含浮动元素的父元素上设置，以 :after 为例，使用如下代码：

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

上面的代码中，将空的 content 设置为 ""，并将其 display 属性设为 table，使用 clear 属性清除了浮动。

兼容性

需要注意的是，该方法不适用于 IE6, IE7。因此，为了在这些旧版本浏览器上得到正确结果，可以添加如下代码：

.container {
    *zoom: 1;
}
.container:after {
    content: "";
    display: table;
    clear: both;
}

使用 CSS 的 star hack 将 zoom 属性应用于 IE6, IE7，使得这些浏览器能够理解 clear 属性，并也能正确地计算父元素的高度。

示例

下面是一个简单的示例，展示了如何使用伪元素清除浮动：

HTML 代码：

<div class="container">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

CSS 代码：

.container {
  border: 1px solid #ccc;
  padding: 10px;
  /* 清除浮动 */
  *zoom: 1;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
.float-left {
  float: left;
  width: 50%;
  background-color: #eee;
}
.float-right {
  float: right;
  width: 50%;
  background-color: #ddd;
}

该示例中，左右两个 div 元素分别设置左右浮动，但由于 .container 没有正确计算高度，导致 div 元素溢出了容器。通过使用伪元素清除浮动后，容器能够正确地计算高度，使得两个浮动元素能够正确地显示在容器中。