Html 为什么使用 <div class="clear"></div> ？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21234175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why <div class="clear"></div> used?
提问by Andre Chenier
I'll adapt my self to what 52framework.comoffers. (HTML5, CSS3, JS framework)
Despite watching grid tutorial video and inspecting other demosource codes, I couldn't understand why framework used <div class="clear"></div><!-- clear -->code at 12th line.
我会让自己适应52framework.com提供的东西。(HTML5, CSS3, JS 框架) 尽管看了网格教程视频和检查其他演示源代码，我还是不明白为什么框架使用<div class="clear"></div><!-- clear -->第 12 行的代码。
Code below's address is: http://demo.52framework.com/demos/framework/grid.html
下面代码的地址是：http: //demo.52framework.com/demos/framework/grid.html
<body>
<div class="row">
<header>
<div class="logo col_7 col">52framework</div><!-- logo col_7 -->
<nav class="col_9 col">
<ul>
<li><a href="#navigation">navigation 1</a></li>
<li><a href="#navigation">navigation 2</a></li>
<li class="last"><a href="http://www.enavu.com">enavu network</a></li>
</ul>
</nav><!-- nav col_9 -->
<div class="clear"></div><!-- clear -->
</header>
</div><!-- row -->
...
This code below is also from same source but as you see <div class="clear"></div><!-- clear -->piece of code isn't used here even though more partition has been done here.
下面的这段代码也来自相同的来源，但正如您所见<div class="clear"></div><!-- clear -->，即使这里已经完成了更多的分区，这里也没有使用这段代码。
<!-- this section shows off the grid and how it can be used -->
<section class="row" id="grid">
<h2>Grid Framework</h2>
<div class="col col_8">
col_8
<div class="row">
<div class="col col_1">col_1</div>
<div class="col col_7">col_7
<div class="row">
<div class="col col_3">col_3</div>
<div class="col col_4">col_4</div>
</div><!-- row -->
</div>
</div><!-- row -->
</div><!-- col_8 -->
<div class="col col_8">
col_8
<div class="row">
<div class="col col_4">4</div>
<div class="col col_4">4</div>
</div><!-- row -->
</div><!-- col_8 -->
<div class="col_16 col" style="margin-top:15px;">
<div class="row">
<div class="col col_9">col_9</div>
<div class="col col_7">col_7</div>
</div><!-- row -->
</div><!-- col_16 -->
<div class="col_16 col">
<a href="http://www.52framework.com/documentation/" class="documentation">Grid Framework Documentation</a>
</div><!-- col_16 -->
</section><!-- row -->
Related CSS codes:
相关CSS代码：
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
.col {
margin-left:10px; margin-right:10px;
display: inline;
overflow: hidden;
float: left;
position: relative;
}
.row{
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}
/* Column widths, and element width based on grid */
.col_1, .width_1 { width:40px; }
.col_2, .width_2 { width:100px; }
.col_3, .width_3 { width:160px; }
.col_4, .width_4 { width:220px; }
.col_5, .width_5 { width:280px; }
.col_6, .width_6 { width:340px; }
.col_7, .width_7 { width:400px; }
.col_8, .width_8 { width:460px; }
.col_9, .width_9 { width:520px; }
.col_10, .width_10 { width:580px; }
.col_11, .width_11 { width:640px; }
.col_12, .width_12 { width:700px; }
.col_13, .width_13 { width:760px; }
.col_14, .width_14 { width:820px; }
.col_15, .width_15 { width:880px; }
.col_16, .width_16 { width:940px; }
采纳答案by James Donnelly
It's a method used to clear the floatpropertyyour navhas obtained through its .colclass. Without this the content following your navelement may appear alongside your navelement rather than below it.
这是一种用于清除float您nav通过其.col类获得的属性的方法。如果没有这个，nav元素后面的内容可能会出现在你的nav元素旁边而不是它下面。
For further reading, see Chris Coyier's The How and Why of Clearing Floats.
如需进一步阅读，请参阅 Chris Coyier 的The How and Why of Clearing Floats。
