为什么使用?

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.

我会让自己适应52framework.com提供的内容。(HTML5, CSS3, JS框架)尽管观看了网格教程视频，并检查了其他的演示源代码，但我不理解为什么框架使用了

代码在第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> 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; }

1 个解决方案

#1

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.

它是一种清除浮动属性的方法你的nav通过它的。col类获得。没有这一点，你的导航元素后面的内容可能会出现在你的导航元素旁边而不是下面。

For further reading, see Chris Coyier's The How and Why of Clearing Floats.

要进一步阅读，请参见Chris Coyier的《如何和为什么清除浮动》。

#1

它是一种清除浮动属性的方法你的nav通过它的。col类获得。没有这一点，你的导航元素后面的内容可能会出现在你的导航元素旁边而不是下面。

For further reading, see Chris Coyier's The How and Why of Clearing Floats.

要进一步阅读，请参见Chris Coyier的《如何和为什么清除浮动》。

为什么 使用?

Related CSS codes:

1 个解决方案

#1

#1

相关文章