不幸的是，没有现有的元素可以应用清理，所以需要添加一个空元素并且清理它。
.news{
background-color: gray;
border: solid 1px black;
}
.news img {
float:left;
}
.news p{
float:right;
}
.clear{
clear:both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
这会实现我们希望的效果，但是要添加不必要的代码。常常有元素可以应用clear，但是有时候不得不为了进行布局而添加无意义的标记。
还可以不对浮动的文本和图像进行清理，而是选择对容器div进行浮动：
.news{
background-color: gray;
border: solid 1px black;
float:left;
}
.news img {
float:left;
}
.news p{
float:right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
这也会产生我们想要的结果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的几乎所有东西进行浮动，然后使用适当的有意义元素（常常是站点的页脚）对这些浮动元素进行清理。这有助于减少或消除不必要的标记。但是，浮动会变得复杂，而且一些老式浏览器在处理有许多浮动元素的布局时有困难。因此，许多人喜欢添加少量的额外标记。
应用值为hidden或auto的overflow属性会自动地清理包含的任何浮动元素，而不需要添加额外的标记。这个方法并不适合所有情况，因为设置框的overflow属性会影响它的表现。
最后，一些人使用CSS生成的内容或JavaScript对浮动元素进行清理。这两种方法的基本概念是相同的。并不直接向标记中添加进行清理的元素，而是将它动态地添加到页面中。