此(http://jsfiddle.net/77RRA/1/)正在运行,而此(http://jsfiddle.net/77RRA/)则不然。
Isn&lt; tt clearfix是否应该替换<div style="clear: both;"></div>
行?
答案 0 :(得分:5)
不是clearfix应该替换行
<div style="clear: both;"></div>
是。 clearfix用于避免非语义空标记。但是,要使其工作,您需要将其放在父元素上。 (Example)
但是,在你的情况下,它没有解决兄弟姐妹忽略浮动元素的问题。这不是clearfix的意图,您只需在clear:right
兄弟上添加both
(或#child
)即可恢复正常的文档流程。
答案 1 :(得分:1)
“不是clearfix应该替换行<div style="clear: both;"></div>?
”
想象一下,你有一个装有几件物品的容器。如果所有这些物品都是浮动的,则容器会有效地丢失其高度信息。因此,底边和背景样式显示错误。 clearfix通过在容器元素+之前和之后添加伪元素来设置display: table;
以将其拉回到其完整高度来解决此问题。
在您的情况下,您必须在clear: both;
#child
答案 2 :(得分:0)
在你的情况下,你试图从自身中清除浮动元素(使用属于它自己的伪元素)。
应该在浮动元素后面的元素上清除。
其他一些规则也可以实现这一目标。
#main {
background: lightgreen;
width: 100px;
height: 200px;
}
#one {
float: right;
display: block;
}
#child {
background: red;
width: 100%;
height: 20px;
display:inline-block
}
display:inline-block;
将从浮动元素的任何一侧清除此元素。