Bootstrap：这个clearfix应该如何工作？
我正在关注这个Bootstrap教程，并没有真正获得使用clearfix的例子。 在添加clearfix之前，html是：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="../bootstrap-3.3.4-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
p{
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
}
</style>
</head>
</body>
<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</p></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="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="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>
</body>
</html>
在添加了clearfix之后：
</body>
<div class="container">
<div class="row">
<div class="col-md-4"><p class="fat">Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block" style="clear: both"></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p class="fat">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>
</body>
我使用.fat类制作了两个div（方框1和方框5），以查看clearfix的效果应该是什么。 但是在比较两者（有和没有clearfix）之后，我没有得到任何可见的结果： 
如果我没有错，那么clearfix应该达到的目标是让空的clearfix div清除大盒子1的浮动，这样Box 4将落入它的第1列，而不会被刷新到它的边。 这可以在Box 4以及Box 7 divs中实现我的设置style="clear: both" ： 
我不太确定，因为教程没有给出任何截图的预期结果，所以这是什么clearfix应该实现，或者我只是了解整个事情是错的？ 如果是这样，为什么添加clearfix div没有任何影响？ 如果有人能够澄清，我将非常感激。 谢谢！
链接地址: http://www.djcxy.com/p/87623.html