CSS布局之清除浮动

clear

clear 可以清除外元素的浮动。比较下面两个例子：

<div class="box">...</div>
<section>...</section>

.box {
   float: left;
   width: 200px;
   height: 100px;
   margin: 1em;
}

在这个例子中， section 元素实际上是在 div 之后的（译注：DOM结构上）。然而 div 元素是浮动到左边的，于是 section 中的文字就围绕了 div ，并且section 元素包围了整个元素。如果我们想让 section 显示在浮动元素之后呢？

.box {
   float: left;
   width: 200px;
   height: 100px;
   margin: 1em;
}
.after-box {
  clear: left;
}

使用 clear 我们就可以将这个段落移动到浮动元素 div 下面。你需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

overflow:auto 可以清除内元素的浮动

在使用浮动的时候经常会遇到一个古怪的事情：

img {
 float: right;
}

清除浮动overflow

见证奇迹的时刻到了！有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动（clearfix hack）。

让我们加入一些新的CSS样式：

.clearfix {
 overflow: auto;
}

现在再看看发生了什么：

清除浮动overflow2

这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式：

.clearfix {
  overflow: auto;
  zoom: 1;
}

有些独特的浏览器需要“额外的关照”。清除浮动这谭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。