引导程序中的类 clearfix 问题答案

【问题标题】：Issue with class clearfix in bootstrap引导程序中的类 clearfix 问题
【发布时间】：2013-04-22 01:12:06
【问题描述】：

我正在使用 twitter 引导程序，我在引导程序中遇到了 clearfix 类的问题。我的 html 是：

<div class="pull-left">This is a text</div>
<hr class="clearfix" />

我期望的是水平线应该出现在显示文本的下一行，但它呈现在文本的右侧。如果当我在hr 中使用style='clear: both;' 时，它就可以正常工作。为什么clearfix 不像clear: both 那样做？

【问题讨论】：

标签： javascript css twitter-bootstrap clearfix

【解决方案1】：

clearfix 类应该应用于父容器元素

<div class="clearfix">
    <div class="pull-left">This is a text</div>
</div>

演示：Plunker

【讨论】：

【解决方案2】：

尝试以下方法：

<div>
    <div class="pull-left">This is a text</div>
    <div class="clearfix" />
</div>
<hr />

在这种情况下，空的 clear div 被放置在您的 pull-left div 的右侧并进行清除。
问题是如果你在元素上使用float: left，那么它会变成浮动，如果有空闲空间的话，它之后的下一个元素会被放在右边。因此，您应该将需要浮动的所有元素与float: left（例如pull-left）连续放置，并用float: none; clear: both（例如clearfix）关闭此序列以停止浮动。

【讨论】：

我用
标签试过了，没用..
工作后！