父元素的高度为0利用伪元素-after清除浮动可解决

在使用浮动布局进行页面多列布局时，经常利用 CSS 的 `float: left/right` 属性。浮动元素的一个常见问题是，如果父元素没有明确定义高度，那么它的高度会默认为 0，并不会根据子元素的高度自动调整。若想让某些元素避开浮动元素并出现在下一行，则这些元素不应紧跟在浮动元素后面。

对于样式表，我们有这样的代码：

```css

content {

background: 000;

}

.left {

width: 100px;

height: 100px;

background: eee;

margin: 0 10px;

float: left;

}

```

在使用浮动布局时，我们经常需要一个块级元素来设置 `clear` 属性以清除浮动。如果浮动元素的下方已有其他元素，可以直接对这个元素设置 `clear: both`。但在没有其它元素的情况下，我们通常需要一个空白标签来清除浮动。然而这种做法无疑会增加浏览器的渲染负担。为了解决这个问题，我们可以使用伪元素 `:after` 来替代这个空白标签。由于清除浮动需要在浮动元素的后面进行，因此我们不能使用 `:before`。我们可以对 `:after` 设置 `content: ""` 并使其 `display: block` 成为块级元素后 `clear: both` 来清除浮动。代码如下：

```css

content:after {

content: "";

display: block;

clear: both;

}

```

值得注意的是，上述方法在 IE6、IE7 中可能无法正常工作。为了在这些旧版浏览器中也能使用，我们需要对 `content` 设置 `zoom: 1`。这样，我们就可以在不增加浏览器渲染负担的情况下清除浮动，让页面布局更加灵活和高效。这样设计的页面在呈现多列布局时，既美观又具有良好的兼容性和性能。