如何使用.clearfix类？

Question

我想我误解了.clearfix班级的概念.也许有人可以帮助我.

我正在寻找一种使用方式,float而clear不会弄乱我的标记.所以我想,这就是.clearfix可以用的地方.

在一个空的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>

结果如下.不过,我期待一个tic tac toe-field.有人能告诉我:

1. 我如何才能实现自己的目标
2. 这.clearfix堂课真的可以用来做什么？

Answer 1

在clearfix类用于其所有的孩子都浮在容器上.如果你不使用它,容器将不会获得任何高度(IE中除外).http://complexspiral.com/publications/containing-floats/

你所追求的不是一个clearfix,而只是一个clear.您可以创建一个类
.clear { clear: both;}
并应用该类而不是clearfix您现在使用的类.

如果你想了解更多信息clearfix,那里有很多信息:
什么是clearfix？

我已经设置了一个小例子来演示和使用clearfix和clear:http://jsfiddle.net/hjXMG/1

Answer 2

• 在浮动块 周围添加了Clearfix
• 浮动块后添加清除