在引导中类清除修复的问题

Issue with class clearfix in bootstrap

本文关键字：问题 清除      更新时间：2023-09-26

我使用twitter bootstrap，我在bootstrap中有clearfix类的问题。我的html是:

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

我期望的是水平线应该在下一行显示的文本中出现，但它呈现在文本的右侧。如果我用style='clear: both;'在hr比它工作得好。为什么clearfix不像clear: both那样做?

类clearfix应应用于父容器元素

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

演示:恰好

尝试如下:

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

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

相关文章：