Why <div class="clear"></div> used?

StackOverflow https://stackoverflow.com/questions/21234175

Question

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.

Code below's address is: 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.

<!-- 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; }
Was it helpful?

Solution

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.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top