float et clear : pour y voir clair et ne plus flotter
Le
Olivier Miakinen
Bonjour,
Je crois que je n'ai pas encore parfaitement compris le fonctionnement
des propriétés CSS float et clear. Pour tenter d'y voir un peu plus
clair, j'aurais juste une question : existe-t-il une situation dans
laquelle un clear:both donnerait un résultat différent d'un clear:left
(respectivement clear:right) ?
Cordialement,
--
Olivier Miakinen
Je crois que je n'ai pas encore parfaitement compris le fonctionnement
des propriétés CSS float et clear. Pour tenter d'y voir un peu plus
clair, j'aurais juste une question : existe-t-il une situation dans
laquelle un clear:both donnerait un résultat différent d'un clear:left
(respectivement clear:right) ?
Cordialement,
--
Olivier Miakinen
Poser une question
Tu poses de ces questions !
Rassures-toi je suis loin d'avoir tout compris dans ce système obscur...
Ce que je sais c'est qu'un clear: left ou un clear: both appliqué à un
élément flottant qui suit un précédent élément flottant lui aussi,
empêche cet élément suivant de se coller sur la droite de l'élément
précédent, ce qui arrive très souvent et est vraiment très chiant ! S'il
y a assez de place, il fait tout pour remonter à droite de l'élément
précédent, une vraie plaie !
Si tu comprends tu as de la chance, moi je ne comprends même plus ce que
j'ai écrit ;-)
--
Nouveautés !
http://www.grenault.net/derniere_minute.htm
A priori, la situation suivante :
- col de gauche, dedans une image de hauteur 100px en float: left
- colonne centrale avec image de 300px de hauteur
- col de droite, dedans une image de hauteur 700px en colonne de droite
et en float: right
Le div qui suit, si en clear: left (et au contenu pas trop large
évidemment), se collera sous la colonne de gauche, mais pas sous les
deux autres.
Si en clear: right, il se collera sous la colonne de droite (et donc, vu
la hauteur de celle-ci, sous les deux autres également, mais c'est un
hasard).
clear: both, en dessous des trois évidemment (rien à gauche, rien à
droite !)
Pas sûr d'avoir compris ta question, du coup...
--
Aldo M.
Alorsse donc c'est mon tour,
vu que je n'ai pas compris les démos des autres ;-)
ni la question ;-)
clear:both; stoppe les flottaisons right et/ou left
clear: right; devrait ne rien faire après un float: left;
clear: left; devrait ne rien faire après un float: right;
float --> clear du même côté tous deux
Si on veut être certain de clearationner gauche et droite, hop! both
(pask'on a [p float:left] [p float:right] et qu'on veut ensuite être
libéré des flottaisons d'1 coup)
(pask'une fois on a un p un coup flottant à droite, un coup flottant à
gauche, et qu'on veut s'en libérer sans savoir duquel)
.normal { clear: both }
.flotte { width:60%;height:150px;border:1px solid }
<h2>test 1</h2>
<p class="flotte" style="float:left">flotte gauche</p>
<p>remplissage<br>gauche</p>
<h2 class="normal">test 2</h2>
<p class="flotte" style="float:right">flotte droite</p>
<p>remplissage<br>droite</p>
<h2 class="normal">test 3</h2>
<p>texte après les autres et sur sa ligne</p>
--
Stéphane Moriaux avec/with iMac-intel
Tiens, je suis en train (merci les gars !) de feuilleter les super pages
d'Eric Meyer (css/edge) et il a ce petit exemple d'utilisation d'un
float unilatéral, bien plus parlant que les nôtres :
http://meyerweb.com/eric/css/edge/s.../demo.html
--
Aldo M.
Dans le genre (float:left; clear:left;)
j'avais çà :
qui me causait soucis avec certain IE.
Où en sont-ils ces IE à ce propos ?
--
Stéphane Moriaux avec/with iMac-intel