CSS浮动和浮动清除讲解

我们经常在少量开源的项目(例如：ecmall、wordpress)中看到相似下面的代码：

xxxx

yyyyy
 

注意上面的代码中，加红的代码中类clear的css样式内容为clear:both;而

与

如果有一个图片，你希望让它浮动到一个文本块的左边。你想将这个图片和文本包含在另一个具备背景颜色和边框的元素中。你可能会编写下面这样的代码：

.news{
background-color:gray;
border:solid 1px black;
}
.news img{
float:left;
}
.news p{
float:right;
}


some text

但是，由于浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用clear。只可惜这个示例中没有现有的元素可以清除，所以需要在最后一个段落下面增加一个空元素并且清除它。

由于浮动元素不占据空间，所以容器元素不包围它们。增加一个进行清除的空元素可以迫使容器元素包围浮动元素

.news{
background-color:gray;
border:solid 1px black;
}
.news img{
float:left;
}
.news p{
float:right;
}


some text

这会实现我们希望的效果，但是要增加不必要的代码。常常有现成的元素可以应用clear，但是有时候为了布局不得不忍受巨大痛苦增加无意义的标记。