CSS clearfix无效

时间:2013-06-14 13:24:40

标签: css clearfix

此(http://jsfiddle.net/77RRA/1/)正在运行,而此(http://jsfiddle.net/77RRA/)则不然。

Isn&lt; tt clearfix是否应该替换<div style="clear: both;"></div>行?

3 个答案:

答案 0 :(得分:5)

  

不是clearfix应该替换行<div style="clear: both;"></div>

是。 clearfix用于避免非语义空标记。但是,要使其工作,您需要将其放在父元素上。 (Example

但是,在你的情况下,它没有解决兄弟姐妹忽略浮动元素的问题。这不是clearfix的意图,您只需在clear:right兄弟上添加both(或#child)即可恢复正常的文档流程。

your fixed Example

答案 1 :(得分:1)

“不是clearfix应该替换行<div style="clear: both;"></div>?

  • 没有

想象一下,你有一个装有几件物品的容器。如果所有这些物品都是浮动的,则容器会有效地丢失其高度信息。因此,底边和背景样式显示错误。 clearfix通过在容器元素+之前和之后添加伪元素来设置display: table;以将其拉回到其完整高度来解决此问题。

在您的情况下,您必须在clear: both;

上添加#child

答案 2 :(得分:0)

在你的情况下,你试图从自身中清除浮动元素(使用属于它自己的伪元素)。

应该在浮动元素后面的元素上清除。

其他一些规则也可以实现这一目标。

http://jsfiddle.net/77RRA/6/

#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;将从浮动元素的任何一侧清除此元素。