Pourquoi <div class=“clear”></div> utilisé?

Je vais adapter mon auto à ce que 52framework.com offre. (HTML5, CSS3, JS cadre)
En dépit de regarder la grille de la vidéo tutoriel et inspecter d'autres démo codes source, je ne pouvais pas comprendre pourquoi servi de cadre <div class="clear"></div><!-- clear --> code à la ligne 12.

Code ci-dessous l'adresse est: 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 -->
...

Ce code ci-dessous est également de la même source mais comme vous le voyez <div class="clear"></div><!-- clear --> morceau de code n'est pas utilisé ici, même si plus de la partition qui a été fait ici.

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

Liées code 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; }
Il est nécessaire de fixer à deux colonnes problème (à l'aide du flotteur-prop) stackoverflow.com/questions/211383/... Vous pouvez supprimer plus clair, et de voir par vous-même
Il est là pour effacer toutes les précédentes float alignements comme flotter à gauche ou à droite & etc.

OriginalL'auteur Andre Chenier | 2014-01-20

  1. 5

    C'est une méthode utilisée pour désactivez l'option float de la propriété votre nav a obtenu grâce à son .col classe. Sans cela, le contenu suivant votre nav élément peut apparaître à côté de votre nav élément plutôt qu'en dessous.

    Pour en savoir plus, voir Chris Coyier de Le Comment et le Pourquoi de la Compensation des Flotteurs.

    Il est également intéressant de mentionner que la plupart des développeurs maintenant d'éviter la nécessité d'un élément supplémentaire, juste pour éclaircir les flotteurs, en utilisant le "après" pseudo élément sur le contenant pour effacer la flotte sur le contenu des éléments d'enfant. La "ligne" classe se débarrasser efficacement le flotteur de tout enfant d'éléments dans votre deuxième exemple, en raison de la valeur de débordement, mais je dois dire que ce n'est pas considéré comme une bonne pratique et vous pouvez regarder un autre framework CSS.

    OriginalL'auteur James Donnelly