/ Code Css clear | Résultat du code Css clear | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS clear.

<style>
/* Affichage */
.sous-groupe { border : 1px dashed #666; margin:5px; overflow:hidden;  : both; }
.groupe { border : 1px solid #666; margin:5px; padding:5px;  : both; }
.defaut, .new, .clear { border : 1px dotted #666; }
.new { border-color:green; }
.clear { border-color:red; border-style:solid; }
.width620{ width:620px; }
.width150{ width:150px; }
.img{ width:50px; height:50px; }

.float-left{  : left }
.float-right{  : right }
.clear-left{  : left }
.clear-right{  : right }
.clear-both{  : both }
</style>
 <div class="groupe width150">
  <div class="sous-groupe width">
    <img class="defaut img" src="/img/style_css/background.gif" align="left">
    <div class="defaut">Duis autem vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
  <div class="sous-groupe width">
    <img class="new img" src="/img/style_css/background.gif" align="left">
    <div class="clear clear-left"><b>clear-left</b> vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
  <div class="sous-groupe width">
    <img class="new img" src="/img/style_css/background.gif" align="left">
    <div class="clear clear-right"><b>clear-right</b> vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
  <div class="sous-groupe width">
    <img class="new img" src="/img/style_css/background.gif" align="left">
    <div class="clear clear-both"><b>clear-both</b> vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
</div>
<div class="groupe width620">
  <div class="sous-groupe">
    <div class="defaut width150 float-right">1) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="defaut width150 float-right">2) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="defaut width150 float-right">3) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="defaut width150 float-right">4) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
  <div class="sous-groupe">
    <div class="new width150 float-right">1) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">2) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="clear width150 float-right clear-right">3) float-right <b>clear-right</b> iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">4) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">5) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
   <div class="sous-groupe">
    <div class="new width150 float-right">1) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">2) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="clear width150 float-right clear-left">3) float-right <b>clear-left</b> iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">4) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">5) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
   <div class="sous-groupe">
    <div class="new width150 float-right">1) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">2) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="clear width150 float-right clear-both">3) float-right <b>clear-both</b> iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">4) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-right">5) float-right vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
</div>
<div class="groupe width620">
  <div class="sous-groupe">
    <div class="defaut width150 float-left">1) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="defaut width150 float-left">2) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="defaut width150 float-left">3) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="defaut width150 float-left">4) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
  <div class="sous-groupe">
    <div class="new width150 float-left">1) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">2) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="clear width150 float-left clear-right">3) float-left <b>clear-right</b> iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">4) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">5) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
   <div class="sous-groupe">
    <div class="new width150 float-left">1) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">2) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="clear width150 float-left clear-left">3) float-left <b>clear-left</b> iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">4) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">5) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
   <div class="sous-groupe">
    <div class="new width150 float-left">1) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">2) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="clear width150 float-left clear-both">3) float-left <b>clear-both</b> iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">4) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
    <div class="new width150 float-left">5) float-left vel eum iriure dolor in hendrerit in vulputate.</div>
  </div>
</div>

Interprétation du code de la propriété clear CSS par votre navigateur.

Duis autem vel eum iriure dolor in hendrerit in vulputate.
clear-left vel eum iriure dolor in hendrerit in vulputate.
clear-right vel eum iriure dolor in hendrerit in vulputate.
clear-both vel eum iriure dolor in hendrerit in vulputate.
1) float-right vel eum iriure dolor in hendrerit in vulputate.
2) float-right vel eum iriure dolor in hendrerit in vulputate.
3) float-right vel eum iriure dolor in hendrerit in vulputate.
4) float-right vel eum iriure dolor in hendrerit in vulputate.
1) float-right vel eum iriure dolor in hendrerit in vulputate.
2) float-right vel eum iriure dolor in hendrerit in vulputate.
3) float-right clear-right iriure dolor in hendrerit in vulputate.
4) float-right vel eum iriure dolor in hendrerit in vulputate.
5) float-right vel eum iriure dolor in hendrerit in vulputate.
1) float-right vel eum iriure dolor in hendrerit in vulputate.
2) float-right vel eum iriure dolor in hendrerit in vulputate.
3) float-right clear-left iriure dolor in hendrerit in vulputate.
4) float-right vel eum iriure dolor in hendrerit in vulputate.
5) float-right vel eum iriure dolor in hendrerit in vulputate.
1) float-right vel eum iriure dolor in hendrerit in vulputate.
2) float-right vel eum iriure dolor in hendrerit in vulputate.
3) float-right clear-both iriure dolor in hendrerit in vulputate.
4) float-right vel eum iriure dolor in hendrerit in vulputate.
5) float-right vel eum iriure dolor in hendrerit in vulputate.
1) float-left vel eum iriure dolor in hendrerit in vulputate.
2) float-left vel eum iriure dolor in hendrerit in vulputate.
3) float-left vel eum iriure dolor in hendrerit in vulputate.
4) float-left vel eum iriure dolor in hendrerit in vulputate.
1) float-left vel eum iriure dolor in hendrerit in vulputate.
2) float-left vel eum iriure dolor in hendrerit in vulputate.
3) float-left clear-right iriure dolor in hendrerit in vulputate.
4) float-left vel eum iriure dolor in hendrerit in vulputate.
5) float-left vel eum iriure dolor in hendrerit in vulputate.
1) float-left vel eum iriure dolor in hendrerit in vulputate.
2) float-left vel eum iriure dolor in hendrerit in vulputate.
3) float-left clear-left iriure dolor in hendrerit in vulputate.
4) float-left vel eum iriure dolor in hendrerit in vulputate.
5) float-left vel eum iriure dolor in hendrerit in vulputate.
1) float-left vel eum iriure dolor in hendrerit in vulputate.
2) float-left vel eum iriure dolor in hendrerit in vulputate.
3) float-left clear-both iriure dolor in hendrerit in vulputate.
4) float-left vel eum iriure dolor in hendrerit in vulputate.
5) float-left vel eum iriure dolor in hendrerit in vulputate.

Interprétation normale du code de la propriété CSS clear (copie d'écran).

copie d'écran de l'affichage de la propriété CSS clear