我有一个列表,而li有一个float:left;
。 <ul>
之后的内容应正确对齐。因此,我可以建立以下内容:
我想,我可以使用伪选择器删除<div class="clear">
,例如:after。
但是这个例子不起作用:
我是否总是需要创建一个单独的div来清除浮动元素?
答案 0 :(得分:254)
答案 1 :(得分:6)
不,你不能做这样的事情:
<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%;
}
答案 2 :(得分:5)
这也可行:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* IE 6 & 7 */
.clearfix {
zoom: 1;
}
将课程clearfix
提供给父元素,例如您的ul
元素。
答案 3 :(得分:0)
文字'dasda'绝不会在标签内,对吗?语义上和有效的HTML,只需添加清晰的类:
答案 4 :(得分:0)
使用
.wrapper:after {
content : '\n';
}
很像Roko提供的解决方案。它允许使用:after和:在psuedo之前插入/更改内容。详情请查看 http://www.quirksmode.org/css/content.html