Bootstrap: How is this clearfix supposed to work?
I'm following through on this Bootstrap tutorial, and not really getting their example on using clearfix. Before adding clearfix, the html is:
<!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>
After adding the 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>
I've made two of the divs (Box 1 and Box 5) larger using the .fat class to see what the effect of clearfix is supposed to be. But after comparing the two (with and without clearfix), I don't get any visible result: 
If I'm not wrong, what clearfix is supposed to achieve is for the empty clearfix div to clear the big Box 1 float so that Box 4 will fall under it in column 1 and not get flushed to its side. This I can achieve my setting style="clear: both" in the Box 4 as well as Box 7 divs: 
I'm not too sure because the tutorial didn't give any screenshots of the expected results, so is this what clearfix is supposed to achieve, or am I just understanding the whole thing wrong? If so, why does adding the clearfix divs have no effect whatsoever? I'd appreciate very much if anyone could clarify. Thanks!
链接地址: http://www.djcxy.com/p/87624.html上一篇: groovy findAll扩展＆lt;