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

Question

我正在学习从this online tutorial引导。在创建与引导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> 
 

 
    <!-- \t <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> 
 

 
    <!-- \t <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> 
 

 
    <!-- \t <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

引导自己的文档提供了一个很好的例子，为什么在其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类的地方：

这是它看起来像没有它：