I am studying bootstrap from this online tutorial. In Creating Multi-Column Layouts with Bootstrap 3 Grid System section they say:
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.
I tried giving different heights to columns within a row. I found that that I do not need .clearfix, because the layout is not breaking. Applying .clearfix or not appplying it doesn't make any difference to the layout.
Without `.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>With .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>So, why use .clearfix if doesn't make any difference?