css - CSS clearfix not working

Question

This (http://jsfiddle.net/77RRA/1/) is working, while this (http://jsfiddle.net/77RRA/) is not.

Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>?

Answer 1

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

是的。clearfix 用于避免非语义的空标签。但是，要使其正常工作，您需要将其放置在父元素上。（例）

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

你固定的例子

Answer 2

“clearfix 不应该代替这条线吗<div style="clear: both;"></div>?”

• 不

想象一下，您有一个装有多个物品的容器。如果所有这些项目都是浮动的，则容器实际上会丢失其高度信息。所以边距底部和背景样式显示错误。clearfix 通过在容器元素之前和之后添加伪元素 + 设置 adisplay: 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;将从浮动元素的任何侧面清除此元素。