使用:清除浮动元素之后

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

http://jsfiddle.net/8unU8/

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

但是这个例子不起作用:

http://jsfiddle.net/EyNnk/

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

这样写:

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

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

不,你不这样做就足够了:

 <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%; } 

这也将工作:

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

将类clearfix元素,例如你的ul元素。

来源在这里和这里 。

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

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

使用

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

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