使用：清除浮动元素之后

我有一个列表，里面有一个float:left; 。 <ul>之后的内容应该正确alignment。 所以我可以build立以下几点：

http://jsfiddle.net/8unU8/

我想，我可以通过使用像伪select器：后，删除<div class="clear"> 。

但是这个例子不起作用：

http://jsfiddle.net/EyNnk/

我是否总是需要创build一个单独的div来清除浮动元素？

Answer 1

这样写：

 .wrapper:after { content: ''; display: block; clear: both; } 

检查这个http://jsfiddle.net/EyNnk/1/

Answer 2

不，你不这样做就足够了：

 <ul class="clearfix"> <li>one</li> <li>two></li> </ul> 

和下面的CSS：

 ul li {float: left;} .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } 

Answer 3

这也将工作：

 .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* IE 6 & 7 */ .clearfix { zoom: 1; } 

将类clearfix到父元素，例如你的ul元素。

来源在这里和这里 。

Answer 4

文本“dasda”永远不会在标签内，对吗？ 在语义上，要成为有效的HTML，只需添加清除类：

http://jsfiddle.net/EyNnk/2/

Answer 5

使用

 .wrapper:after { content : '\n'; } 

很像Roko提供的解决scheme。 它允许使用：after和之前插入/更改内容：在psuedo之前。 详情请查看http://www.quirksmode.org/css/content.html