使用：after清除浮动元素

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

http://jsfiddle.net/8unU8/

我认为，可以<div class="clear">通过使用：after这样的伪选择器来删除。

但是该示例不起作用：

http://jsfiddle.net/EyNnk/

我是否总是需要创建一个单独的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，只需在其中添加clear类：

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

用

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

非常类似于Roko提供的解决方案。它允许使用：after和：before psuedo插入/更改内容。有关详细信息，请 访问http://www.quirksmode.org/css/content.html