为什么我们需要在引导程序的每 12 列之后添加 .clearfix？

Question

我正在学习 this online tutorial 的引导程序。在使用 Bootstrap 3 网格系统创建多列布局部分他们说：

如果任何一列的高度高于另一列，则它无法正确清除并破坏布局。要解决此问题，请结合使用 .clearfix 类和响应式实用程序类。

我尝试为一行中的列赋予不同的高度。我发现我不需要.clearfix，因为布局没有破坏。应用.clearfix 或不应用它对布局没有任何影响。

没有`.clearfix：

@import  url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")

p {
  padding: 50px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  background: #dbdfe5;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>Box 1</p>
    </div>
    <div class="col-md-4">
      <p>Box 2</p>
    </div>
    <div class="col-md-4">
      <p>Box 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 la box</p>
    </div>

    <!--	<div class="clearfix visible-md-block"></div>  -->

    <div class="col-md-4">
      <p>Box 4</p>
    </div>
    <div class="col-md-4">
      <p>Box 5</p>
    </div>
    <div class="col-md-4">
      <p>Box 6</p>
    </div>

    <!--	<div class="clearfix visible-md-block"></div>  -->

    <div class="col-md-4">
      <p>Box 7</p>
    </div>
    <div class="col-md-4">
      <p>Box 8</p>
    </div>
    <div class="col-md-4">
      <p>Box 9</p>
    </div>

    <!--	<div class="clearfix visible-md-block"></div>  -->

    <div class="col-md-4">
      <p>Box 10</p>
    </div>
    <div class="col-md-4">
      <p>Box 11</p>
    </div>
    <div class="col-md-4">
      <p>Box 12</p>
    </div>
  </div>
</div>

与.clearfix：

@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>Box 1</p>
    </div>
    <div class="col-md-4">
      <p>Box 2</p>
    </div>
    <div class="col-md-4">
      <p>Box 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 last boxBox 3 la box</p>
    </div>

    <div class="clearfix visible-md-block"></div>

    <div class="col-md-4">
      <p>Box 4</p>
    </div>
    <div class="col-md-4">
      <p>Box 5</p>
    </div>
    <div class="col-md-4">
      <p>Box 6</p>
    </div>

    <div class="clearfix visible-md-block"></div>

    <div class="col-md-4">
      <p>Box 7</p>
    </div>
    <div class="col-md-4">
      <p>Box 8</p>
    </div>
    <div class="col-md-4">
      <p>Box 9</p>
    </div>

    <div class="clearfix visible-md-block"></div>

    <div class="col-md-4">
      <p>Box 10</p>
    </div>
    <div class="col-md-4">
      <p>Box 11</p>
    </div>
    <div class="col-md-4">
      <p>Box 12</p>
    </div>
  </div>
</div>

那么，如果没有任何区别，为什么还要使用.clearfix？

Answer 1

Bootstrap 自己的文档在其Responsive Column Resets section 中给出了一个很好的示例：

由于有四层网格可用，您一定会遇到这样的问题：在某些断点处，您的列并不能完全正确地清除，因为其中一层比另一层高。要解决此问题，请结合使用 .clearfix 和我们的响应式实用程序类。

<div class="row">
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

   <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-xs-block"></div>

   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  </div>

这是他们使用的示例标记与 .clearfix 类就位后的样子：

这就是没有它的样子：