css - 如何使用 .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>

低于结果。不过，我期待一个井字游戏。有人可以告诉我：

1. 我怎样才能实现我的目标和
2. .clearfix类真的可以用来做什么？

Answer 1

该类clearfix用于所有子项都在浮动的容器上。如果您不使用它，容器将不会获得任何高度（IE 除外）。http://complexspiral.com/publications/ contains-floats/

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

如果您想了解更多关于clearfix的信息，这里有很多信息：
什么是 clearfix？

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

Answer 2

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