引导程序中的类clearfix问题

Question

我正在使用twitter bootstrap,我clearfix在bootstrap中遇到类问题.我的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)关闭这个序列来停止浮动.