CSS clearfix无效

Question

此（http://jsfiddle.net/77RRA/1/）正在运行，而此（http://jsfiddle.net/77RRA/）则不然。

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

Answer 1

  

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

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

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

your fixed Example

Answer 2

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

• 没有

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

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

上添加#child

Answer 3

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

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

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

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