Html 如何使用 .clearfix 类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17013362/
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
How to use the .clearfix class?
提问by kraftwer1
I think I'm misunderstanding the concept of the .clearfixclass. Maybe somebody can help me out.
我想我误解了.clearfix班级的概念。也许有人可以帮助我。
I'm looking for a way to use floatand clearwithout messing up my markup. So I thought, that's where .clearfixcan be used for.
我正在寻找一种使用方法float并且clear不会弄乱我的标记。所以我想，这就是.clearfix可以使用的地方。
Inside of an empty H5BP-project, my markup looks like:
在一个空的 H5BP 项目中，我的标记如下所示：
<div></div>
<div></div>
<div class="clearfix"></div>
<div></div>
<div></div>
<div class="clearfix"></div>
<div></div>
<div></div>
<div class="clearfix"></div>
Below the result. I was expecting a tic tac toe-field, though. Can somebody tell me:
结果下面。不过，我期待一个井字游戏。有人可以告诉我：
- How I can achieve my goal and
- What the
.clearfixclass really can be used for?
- 我如何实现我的目标和
- 这个
.clearfix类真的可以用来做什么？
回答by Pevara
The clearfixclass is used on a container of which all the children are floating. If you would not use this, the container would not get any height (except in IE). http://complexspiral.com/publications/containing-floats/
在clearfix类用于其所有的孩子都浮在容器上。如果您不使用它，容器将不会获得任何高度（IE 除外）。http://complexspiral.com/publications/ contains-floats/
What you are after is not a clearfix, but just a clear. You could make a class.clear { clear: both;}
and apply that one instead of the clearfixyou are using now.
你所追求的不是一个clearfix，而只是一个clear。您可以创建一个类.clear { clear: both;}
并应用该类而不是clearfix您现在使用的类。
If you want to learn more about clearfix, there is plenty of information out there:
What is a clearfix?
如果您想了解更多关于clearfix，这里有很多信息：
什么是 clearfix？
I have set up a small example to demonstrate the use of clearfixand clear: http://jsfiddle.net/hjXMG/1
我已成立了一个小例子来演示使用的clearfix和clear：http://jsfiddle.net/hjXMG/1
回答by FelipeAls
- Clearfixis added aroundfloating blocks
- Clearis added afterfloating blocks
- 在浮动块 周围添加了Clearfix
- 浮动块后添加清除
