CSS clearfix 不起作用答案

【问题标题】：CSS clearfix not workingCSS clearfix 不起作用
【发布时间】：2013-06-11 03:59:39
【问题描述】：

这个 (http://jsfiddle.net/77RRA/1/) 有效，而这个 (http://jsfiddle.net/77RRA/) 无效。

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

【问题讨论】：

标签： css clearfix

【解决方案1】：

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

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

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

your fixed Example

【讨论】：

也许你能帮助我理解这一点？ jsfiddle.net/BenRacicot/owtqncfb
@BenRacicot 正如我试图解释的那样，clearfix 应该可以恢复 父母的身高。如果您想恢复文档流，您只需在兄弟元素上声明clear:both; - 但是这仍然不能解决问题，浮动元素会从正常的文档流中取出！看看你修改过的例子：jsfiddle.net/owtqncfb/9
感谢您的回复！所以父母的身高必须用溢出或clearfix本身来解释......？

【解决方案2】：

在您的情况下，您正在尝试从自身清除浮动元素（使用属于自身的伪元素）。

Clear 应该在浮动元素之后的元素上。

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

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

【讨论】：

虽然display:inline-block; 是可能的，但使用它并不可行，因为有时您需要另一种显示类型，毕竟这就是clear 的用途。
这个例子很好（我删除了 :after 并添加了那个规则）我相信，特别是对于初学者来说，意识到 clear 不是处理浮动元素的唯一选择是有用的。浮动元素元素具有在固定、绝对、相对和静态之间难以理解的行为。一次搞定的东西很多，一些线索有助于自己学习。
如果你能解释为什么这行得通，那么我可能会接受你的观点，否则我只会认为这是另一种混淆人们的可能性。 :)
inline-block，作为overflow:hidden，作为display:table，修改元素的布局。当收到此规则之一时，面积的计算是根据浮动元素未使用的区域（如果有）来完成的。这种浮动元素可以在流程中处于领先地位，也可以是孩子。（对不起我糟糕的英语）
在你的例子中我使用了内联块，因为你已经给出了 100% 的宽度:)

【解决方案3】：

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

没有

假设您有一个容器，里面装着几件物品。如果所有这些项目都是浮动的，则容器实际上会丢失其高度信息。所以边距底部和背景样式显示错误。 clearfix 通过在容器元素前后添加伪元素 + 设置 display: table; 将其拉伸回其全高来解决此问题。

在您的情况下，您必须在 #child 上添加 clear: both;

【讨论】：

-1 不正确，clearfix is 可以删除那些无意义的元素，但它不适用于 OP 的问题！