使用：清除浮动元素后(Using :after to clear floating elements)

使用：清除浮动元素后(Using :after to clear floating elements)

我有一个清单，李的有一个float:left; 。 <ul>之后的内容应正确对齐。 所以我可以建立以下内容：

http://jsfiddle.net/8unU8/

我想，我可以通过使用伪选择器来删除<div class="clear"> ，如：after。

但这个例子是不行的：

http://jsfiddle.net/EyNnk/

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

I have a list and the li's have a float:left;. The contents after the <ul> should be aligned correctly. Therefore i can build the following:

http://jsfiddle.net/8unU8/

I thought, that I can remove the <div class="clear"> by using pseudo selectors like :after.

But the example is not working:

http://jsfiddle.net/EyNnk/

Do I always have to create a separate div to clear floating elements?

最满意答案

这样写：

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

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

Write like this:

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

Check this http://jsfiddle.net/EyNnk/1/