使用: after 来清除浮动元素

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

Http://jsfiddle.net/8unu8/

我认为，我可以通过使用伪选择符来删除 <div class="clear">，比如: after。

但这个例子并不奏效:

Http://jsfiddle.net/eynnk/

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

html
css

161510 次浏览

小开

最佳答案

Write like this:

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

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

小开

The text 'dasda' will never not be within a tag, right? Semantically and to be valid HTML it as to be, just add the clear class to that:

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

小开

No, you don't it's enough to do something like this:

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

And the following 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%;
}

小开

Use

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

Much like solution provided by Roko. It allows to insert/change content using : after and :before psuedo. For details check http://www.quirksmode.org/css/content.html

小开

This will work as well:

.clearfix:before,
.clearfix:after {
content: "";
display: table;
}


.clearfix:after {
clear: both;
}


/* IE 6 & 7 */
.clearfix {
zoom: 1;
}

Give the class clearfix to the parent element, for example your ul element.

Sources here and here.