Discussion :

[damien77]

Bonjour, j'aimerai avoir deux-trois renseignement sur les float et clear

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="conteneur">
  <div id="menu"></div>
  <div id="corp">
     <div class="element"></div>
     <div class="clear"></div>
  </div>
  <div class="clear"></div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
div#menu { float:left; }
div#corp ( float: right; }
.element { float: left; }
.clear { clear:both; }

Donc au moment où j'appel le clear ( le 1er ) est que le corp et menu vont être affecter ou seulement celui de element ?
De plus j'ai vue d'autre variante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="conteneur">
   <div id="menu"></div>
   <div id="corp">
      <div class="element"></div>
      <div class="clear">&nbsp;</div>
   </div>
  <div class="clear"></div>
 </div>

Qu'elle est la différence...

[Damouille]

Bonjour Damien,

Qu'entends-tu par "effacé" ? Les clear n'effacent rien. Ils donne l'instruction qu'il faut arreter de "floater".

Les floats, right ou left, donnent l'instruction à un élément de s'aligner à droite ou à gauche. De plus, les éléments en dessous de ce dernier s'ajusteront tout autour de lui en l'encerclant.

Quand tu ne veux plus de ce comportement, et que tu veux que les éléments se mettent à la ligne tout bettement, tu utilises un clear.

Pour la différence entre les 2 code, il y en a aucune. le " " est un espace. Il a du etre mis la juste pour que la div ne soit pas vide. Dreamwaver en rajoute partout quand tu utilise l'interface designer, j'en vois pas tellement l'intéret.

[damien77]

D'accord, dsl pour effacer je voulais dire annulé ^^. et merci pour les infos

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="conteneur">
  <div id="menu"></div>
  <div id="corp">
     <div class="element"></div>
     <div class="clear"></div>
  </div>
  <div class="clear"></div>
</div>

Concernant ma question ?
Au moment au j'appel la 1er clear ( qui se trouve dans corp ) est que le menu et le corp ( le bloc ) vont être affecter ou juste le float du bloc élément va être annulé ?

[Damouille]

les clear n'affectent que les éléments qui sont en dessous du clear.

Pour répondre à ta question un clear à l'intérieur d'une div n'effecte que les éléments dans cette meme div.

Dans ton exemple tu as besoin des deux pour "clearer" à la fois les élément du corps et du conteneur

[Candygirl]

Pour répondre à ta question un clear à l'intérieur d'une div n'effecte que les éléments dans cette meme div.

Pas tout à fait

Il me semble que le clear affecte tous les éléments qui sont dans le même contexte de formatage. Dans son exemple, le clear n'agira effectivement pas sur le menu, non pas parce que le menu n'est pas à l'intérieur du div contenant le clear, mais parce que le #corps est positionné en float, ce qui établit justement un nouveau contexte de formatage.

Pour illustrer, voici un exemple avec la même structure html (j'ai rallongé le menu que ce soit plus visible), mais dans lequel le premier clear prendra aussi en compte le menu flottant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="conteneur">
  <div id="menu">menu <br />menu <br />menu <br />menu <br />menu <br />menu <br /></div>
  <div id="corp">
     <div class="element">elememnt flottant</div>
     <div class="clear">1er clear</div>
  </div>
  <div class="clear">2ème clear</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div#menu { float:left; width:200px; }
div#corp ( margin-left:210px; }
.element { float: left; }
.clear { clear:both; }

si maintenant on applique le css suivant à la place (j'ai juste rajouté le width pour plus de similarité):

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div#menu { float:left; width:200px;margin-right:10px; }
div#corp { float: left; }
.element { float: left; }
.clear { clear:both; }

On voit que le 1er clear reste, cette fois-ci et à cause du float sur le #corps, à côté du menu.