为什么< div class =" clear">< / div>用过的？

本文介绍了为什么< div class =" clear">< / div>用过的？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我会根据提供的内容调整自己。（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> code at 12th line.

以下代码地址为：

<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> 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 -->

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; }

52framework