Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

float et clear : pour y voir clair et ne plus flotter

19 réponses
Avatar
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

10 réponses

1 2
Avatar
grenault
Le 19/10/2010 18:31, Olivier Miakinen a écrit :
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,



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
Avatar
Aldo M.
Le 19/10/2010 18:31, Olivier Miakinen a écrit :
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,



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.
Avatar
SAM
Le 19/10/10 18:31, Olivier Miakinen a écrit :
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) ?



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>test 1.bis</h2>
<h2 class="normal">test 2</h2>
<p class="flotte" style="float:right">flotte droite</p>
<p>remplissage<br>droite</p>
<h2>test 2.bis</h2>
<h2 class="normal">test 3</h2>
<p>texte après les autres et sur sa ligne</p>

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Aldo M.
Le 19/10/2010 18:31, Olivier Miakinen a écrit :
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,



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/slantastic/demo.html

--
Aldo M.
Avatar
SAM
Le 21/10/10 12:06, Aldo M. a écrit :
Le 19/10/2010 18:31, Olivier Miakinen a écrit :
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,



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/slantastic/demo.html



Dans le genre (float:left; clear:left;)
j'avais çà :
<http://stephane.moriaux.pagesperso-orange.fr/truc/demos/float_left_dt.shtml>
qui me causait soucis avec certain IE.

Où en sont-ils ces IE à ce propos ?


--
Stéphane Moriaux avec/with iMac-intel
Avatar
Guy Gruais
Bonjour,

Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :

j'avais çà :
<http://stephane.moriaux.pagesperso-orange.fr/truc/demos/float_left_dt.shtml>

Où en sont-ils ces IE à ce propos ?



Avec IE4 :

http://cjoint.com/?0kvpuUT6Nzl

IE5_01 :

http://cjoint.com/?0kvpv6wxUAa

IE5_5 :

http://cjoint.com/?0kvpwSleWHn

IE6 :

http://cjoint.com/?0kvpxWQSSre

IE7 :

http://cjoint.com/?0kvpyDcBbzO

Je n'ai pas encore IE8 :-(

--
Cordialement.


http://fonderie.indret.free.fr/
Avatar
SAM
Le 21/10/10 15:25, Guy Gruais a écrit :
Bonjour,



Hello,

Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :

j'avais çà :
<http://stephane.moriaux.pagesperso-orange.fr/truc/demos/float_left_dt.shtml>



Où en sont-ils ces IE à ce propos ?





Boudiou ! Merci de toutes ces captures !

Avec IE4 :
IE5_01 :
IE5_5 :
IE6 :
IE7 :

http://cjoint.com/?0kvpyDcBbzO



Grands Dieux ! Même le 7 n'y arrive toujours pas ! :-(

Ou bien y a-t'il une astuce pour leur faire entendre raison ?
Pourtant les blocks devraient bien avoir le "layout" avec la précision
du width, du background, etc.

Et avec la démo proposée par Aldo, ils y arrivent ?
(démo basée suivant même principe où les blocks sont à la fois flottants
et arrêt de flottaison)

Je n'ai pas encore IE8 :-(



Ne parlent-ils pas du 9 ?


--
Stéphane Moriaux avec/with iMac-intel
Avatar
Olivier Miakinen
Bonjour,

N'ayant rien de spécialement intelligent à répondre à chacune d'entre
vous, je réponds à mon article de départ.

Le 19/10/2010 18:31, j'écrivais :

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) ?



Merci de vos réponses, mais je confirme que je ne comprends toujours
rien à float et clear... et la page d'Eric Meyer m'est encore plus
mystérieuse que tout ! Bon, je vais relire les docs soigneusement et
tenter d'y piger quelque chose.

Cordialement,
--
Olivier Miakinen
Avatar
WebShaker
Le 21/10/2010 20:00, Olivier Miakinen a écrit :
Merci de vos réponses, mais je confirme que je ne comprends toujours
rien à float et clear... et la page d'Eric Meyer m'est encore plus
mystérieuse que tout ! Bon, je vais relire les docs soigneusement et
tenter d'y piger quelque chose.



Le mieux (et ce serait même utile) serait de faire une page web avec
toutes les combinaisons de div frere, fils et tous les positionnements
possible.

On y verai plus clair.

Mais bon c'est sérieux boulot rien que pour définir l'ensemble des
combinaison a prevoir :)

Etienne
Avatar
SAM
Le 21/10/10 20:00, Olivier Miakinen a écrit :
Bonjour,

N'ayant rien de spécialement intelligent à répondre à chacune d'entre
vous, je réponds à mon article de départ.

Le 19/10/2010 18:31, j'écrivais :

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) ?



Merci de vos réponses, mais je confirme que je ne comprends toujours
rien à float et clear... et la page d'Eric Meyer m'est encore plus
mystérieuse que tout ! Bon, je vais relire les docs soigneusement et
tenter d'y piger quelque chose.



Merci de nous avoir refait signe mais je ne comprends pas ce que tu ne
comprends pas.
Où bloques-tu ?

Les docs ça me fatigue, je ne pourrai donc pas te les expliquer
cependant,
chez Meyer,
il emploie une succession de divs vides
- qu'il bloque à droite
float: right; /* flottaison droite,
le div suivant se cale à sa gauche */
mais le suivant a
clear: right; /* arrêt : ce div passe dessous */
et aussi
float: right; /* flottaison droite,
donc ce suivant flotte aussi à droite */

Donc chacun de ces divs passe dessous le précédent et est bloqué à droite.

OK ?

- chaque div est un peu plus large que le précédent pour donner
l'illusion d'une marge oblique
- l'illusion est renforcée pas une astuce sur les bordures
exemple pour triangle vers la droite :
<p><span style="border-width: 10px;
border-color: white black;
border-style: solid none solid solid;
display: inline-block;
vertical-align: middle"></span> blabla

- et après ces divs de fausse marge, enfin vient le div de contenu
qui, bien entendu, remonte se glisser à gauche des autres.
(en occupant les espaces restés libres, ligne à ligne)

C'est d'un bête qu'il suffisait d'y penser ;-)

--
Stéphane Moriaux avec/with iMac-intel
1 2