javascript - 引导程序中的类 clearfix 问题

Question

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

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

我期待的是水平线应该出现在显示文本的下一行，但它呈现在文本的右侧。如果我使用style='clear: both;'inhr比它工作正常。为什么clearfix不做同样的事情clear: both呢？

Answer 1

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

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

演示：Plunker

Answer 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(say pull-left) 一起浮动的元素放在一行中，并用float: none; clear: both(say clearfix) 关闭此序列以停止浮动。