html - 为什么我们需要在 bootstrap 的每 12 列之后添加 .clearfix？

Question

我正在从 this online tutorial 学习 Bootstrap .在 Creating Multi-Column Layouts with Bootstrap 3 Grid System 部分他们说:

If height of any column is taller than the other it doesn't clear properly and break the layout. To fix this, use the combination of a .clearfix class and the responsive utility classes.

我尝试为一行中的列提供不同的高度。我发现我不需要 .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 中给出了一个很好的例子来说明原因。 :

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

<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 类的示例标记:

这是没有它的样子: