为什么< div class =" clear">< / div>用过的？ [英] Why <div class="clear"></div> used?
问题描述
我会根据 52framework.com 提供的内容调整自己。 （HTML5，CSS3，JS框架）
尽管观看网格教程视频并检查其他演示源代码，我不明白为什么框架在第12行使用< div class =clear>< / div>< !- clear - >
I'll adapt my self to what 52framework.com offers. (HTML5, CSS3, JS framework)
Despite watching grid tutorial video and inspecting other demo source codes, I couldn't understand why framework used <div class="clear"></div><!-- clear --> code at 12th line.
以下代码地址为： 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 -->
...
下面的代码也来自同一个源代码， c $ c>< div class =clear>< / div><！ - clear - >
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.
<!-- 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 -->
相关的CSS代码：
Related CSS codes:
.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; }
推荐答案
http://stackoverflow.com/q/211383/1317805\">清除 float 属性您的 nav 已通过其 .col 类获得。否则，您的 nav 元素之后的内容可能会出现在您的 nav 元素旁边而不是下面。
It's a method used to clear the float property your nav has obtained through its .col class. Without this the content following your nav element may appear alongside your nav element rather than below it.
有关进一步阅读，请参阅Chris Coyier的清除浮动的方式和原因。
For further reading, see Chris Coyier's The How and Why of Clearing Floats.
这篇关于为什么< div class =" clear">< / div>用过的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
