CSS 引导程序中的类 clearfix 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16260533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue with class clearfix in bootstrap
提问by user1740381
I am using twitter bootstrap, i have an issue with clearfixclass in bootstrap. My html is :
我正在使用 twitter 引导程序，我clearfix在引导程序中遇到类问题。我的 html 是：
<div class="pull-left">This is a text</div>
<hr class="clearfix" />
What i am expecting is horizontal line should come in next line of displayed text but it renders at right side of the text. And if when i use style='clear: both;'in hrthan it works fine. Why clearfixnot doing the same as clear: bothdoes ?
我期望的是水平线应该出现在显示文本的下一行，但它呈现在文本的右侧。如果当我使用style='clear: both;'时hr它工作正常。为什么clearfix不做同样的事情clear: both？
回答by Arun P Johny
回答by Sergey Metlov
Try the following:
请尝试以下操作：
<div>
<div class="pull-left">This is a text</div>
<div class="clearfix" />
</div>
<hr />
In this case empty clear div is placed next to right of your pull-left div and does clearing.
The matter is if you use float: lefton the element then it becomes float and the next element after it is placed to the right if there is a free space for it. So you should place all the elements you need to be float with float: left(say pull-left) in a row and close this sequence with float: none; clear: both(say clearfix) to stop floating.
在这种情况下，空的 clear div 被放置在 pull-left div 的右侧并进行清除。
问题是，如果您float: left在元素上使用，则它会变为浮动，并且如果有可用空间，则将其放置在右侧后的下一个元素。因此，您应该将所有需要浮动的元素float: left（例如pull-left）放在一行中，并使用float: none; clear: both（例如clearfix）关闭此序列以停止浮动。
