如何使用 .clearfix 类？答案

【问题标题】：How to use the .clearfix class?如何使用 .clearfix 类？
【发布时间】：2013-06-09 19:33:56
【问题描述】：

我想我误解了.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>

低于结果。不过，我期待一个井字游戏。谁能告诉我：

如何实现我的目标和
.clearfix 类真的可以用来做什么？

【问题讨论】：

标签： css html html5boilerplate boilerplate

【解决方案1】：

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

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

如果您想了解更多关于clearfix 的信息，这里有很多信息：
What is a clearfix?

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

【讨论】：

【解决方案2】：

Clearfix被添加围绕浮动块
清除添加在浮动块之后

【讨论】：