要想阻止行框围绕在浮动框的外边，需要对这个框应用clear。clear属性的值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。为了实现这种效果，在被清理元素的顶空白边上面添加足够的空间，使元素的顶边缘垂直下降到浮动框下面（见图2-17）。
图2-17 清理元素的顶空白边，为前一个浮动框留出足够的垂直空间
浮动元素脱离了文档流，不影响周围的元素。但是，对元素进行清理实际上为前面的浮动元素留出了垂直空间。
这是一个有用的布局工具，它让周围的元素为浮动元素留出空间。这解决了前面看到的绝对定位的问题，也就是垂直高度的改变不影响周围的元素，从而破坏了设计。
我们来更详细地看看浮动和清理。假设有一个图片，希望让它浮动到一个文本块的左边。希望将这个图片和文本包含在另一个具有背景颜色和边框的元素中。你可能会编写下面这样的代码：
.news{
background-color: gray;
border: solid 1px black;
}
.news img {
float:left;
}
.news p{
float:right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
但是，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用clear（见图2-18）。
图2-18 因为浮动元素不占据空间，所以容器元素不包围它们。添加一个进行清理的空元素可以迫使容器元素包围浮动元素