Question

我正在使用twitter bootstrap，我在bootstrap中遇到了clearfix类的问题。我的HTML是：

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

我期待的是水平线应该出现在显示文本的下一行，但它会在文本的右侧呈现。如果我在style='clear: both;'中使用hr，那么它的工作正常。为什么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 />

在这种情况下，空左边的div放在你左拉div的右边，然后清除问题是如果你在元素上使用float: left那么它就变成了浮点数，如果它有一个空闲空间，它就会被放到右边的下一个元素。所以你应该把你需要的所有元素放在一起浮动float: left（比如pull-left）并用float: none; clear: both（比如clearfix）关闭这个序列以停止浮动

引导程序中的类clearfix问题

2 个答案: