float et clear : pour y voir clair et ne plus flotter
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
grenault
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
Aldo M.
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.
SAM
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
Aldo M.
> Bonjour,
>
> Je crois que je n'ai pas encore parfaitement compris le fonctionnement
> clair, j'aurais juste une question : existe-t-il une situation dans
> (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.
SAM
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
Guy Gruais
Vous allez être infiniment heureux d'apprendre que SAM vient d'écrire :
> 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.
guy.s...@free.invalid
http://fonderie.indret.free.fr/
SAM
> 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 ?
Olivier Miakinen
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
WebShaker
> 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
SAM
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 ;-)
Guy Gruais
Vous allez ï¿œtre infiniment heureux d'apprendre que SAM vient d'ï¿œcrire :
> Et avec la dï¿œmo proposï¿œe par Aldo, ils y arrivent ?
Chrome, Firefox et Opera me donnent la mï¿œme chose mais pas IE7 :
http://cjoint.com/?0kwlcinbqp8
>> Je n'ai pas encore IE8 :-(
>
> Ne parlent-ils pas du 9 ?
Ben oui mais j'en suis toujours ￜ la 7. Faut me laisser le temps de
respirer :-)
Olivier Miakinen
>
> Merci de nous avoir refait signe mais je ne comprends pas ce que tu ne
> comprends pas.
C'est une question ￜ laquelle il est gￜnￜralement difficile de
rï¿œpondre quand il s'agit d'un blocage de comprï¿œhension : la
plupart du temps, savoir oￜ l'on bloquait signifie que l'on ne
bloque plus et qu'on a enfin compris !
D'ailleurs je crois que c'est fait. Il me semble que je bloquais
sur la croyance que l'apparition d'un ￜ clear ￜ dans le HTML
faisait que toute la suite devait se placer en dessous des
ￜlￜments qui ￜtaient en ￜ float ￜ, alors qu'en rￜalitￜ cela
ne s'applique (ce qui est logique) qu'ￜ l'ￜlￜment en question.
Au fait, l'illumination m'est venue sur cette page :
<http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
> [...]
>
> - l'illusion est renforcï¿œe pas une astuce sur les bordures
Oui, c'est un truc qui m'a un temps bloquￜ la comprenette aussi.
Maintenant c'est bon.
> [...]
> - 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)
Limpide. Je me sens tout bï¿œte de n'avoir pas compris plus tï¿œt.
> C'est d'un bï¿œte qu'il suffisait d'y penser ;-)
Ah oui, voilￜ.
Encore merci ￜ toi, et ￜ tous les autres qui sont intervenus sur cette
question (en particulier Aldo avec son pointeur vers le site d'Eric Meyer).
Cordialement,
--
Olivier Miakinen
SAM
> Bonjour,
>
> Vous allez ï¿œtre infiniment heureux d'apprendre que SAM vient d'ï¿œcrire :
>
>> Et avec la dï¿œmo proposï¿œe par Aldo, ils y arrivent ?
>
> Chrome, Firefox et Opera me donnent la mï¿œme chose mais pas IE7 :
>
> http://cjoint.com/?0kwlcinbqp8
Ha! Quand mï¿œme ! ï¿œa fonctionne un peu.
>>> Je n'ai pas encore IE8 :-(
>>
>> Ne parlent-ils pas du 9 ?
>
> Ben oui mais j'en suis toujours ￜ la 7.
> Faut me laisser le temps de respirer :-)
:-)
SAM
>
> Il me semble que je bloquais
> sur la croyance que l'apparition d'un ￜ clear ￜ dans le HTML
> faisait que toute la suite devait se placer en dessous des
> ￜlￜments qui ￜtaient en ￜ float ￜ,
Un peu comme si les blocs suivants "hï¿œritaient" de celui en clear ?
alors ... qu'il ne sont pas contenus par lui, donc ne peuvent en hï¿œriter
... ! ?
> alors qu'en rￜalitￜ cela
> ne s'applique (ce qui est logique) qu'ￜ l'ￜlￜment en question.
comme margin, padding, color ... etc. etc. etc.
Ce qui peut peut-ï¿œtre troubler c'est qu'un seul clear libï¿œre de la
flottaison prï¿œcï¿œdente et d'un coup tout le flux suivant.
> Au fait, l'illumination m'est venue sur cette page :
> <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
C'est bien une dï¿œmo qui pourtant pour moi ne m'aurait certainement pas
aidￜ ￜ comprendre
(c'est lequel de tous ces divs en float+clear qui autorise celui normal
ￜ remonter ... tout en haut ?!)
Olivier Miakinen
>>
>> Il me semble que je bloquais
>> sur la croyance que l'apparition d'un ￜ clear ￜ dans le HTML
>> faisait que toute la suite devait se placer en dessous des
>> ￜlￜments qui ￜtaient en ￜ float ￜ,
>
> Un peu comme si les blocs suivants "hï¿œritaient" de celui en clear ?
> alors ... qu'il ne sont pas contenus par lui, donc ne peuvent en hï¿œriter
> ... ! ?
Ce n'est peut-ï¿œtre pas la peine de remuer la plaie autour du couteau,
hein !
Il se trouve que tous les exemples que j'avais vus jusqu'alors
consistaient en un clear sans autre float, ce qui forï¿œait tous
les ￜlￜments suivants ￜ se placer en dessous de l'ￜlￜment
ￜ clearￜ ￜ.
> Ce qui peut peut-ï¿œtre troubler c'est qu'un seul clear libï¿œre de la
> flottaison prï¿œcï¿œdente et d'un coup tout le flux suivant.
Voilￜ.
>> Au fait, l'illumination m'est venue sur cette page :
>> <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
>
> C'est bien une dï¿œmo qui pourtant pour moi ne m'aurait certainement pas
> aidￜ ￜ comprendre
> (c'est lequel de tous ces divs en float+clear qui autorise celui normal
> ￜ remonter ... tout en haut ?!)
Eh bien aucun d'entre eux ne ￜ l'autorise ￜ ￜ remonter : il remonte
parce qu'aucun d'entre eux ne lui *interdit* de le faire !
Ce que je ne comprends pas, en revanche, c'est pourquoi Eric Meyer
ￜtait obligￜ d'alterner les ￜlￜments en left et ceux en right, et
surtout en quoi c'est une consï¿œquence du respect strict de la norme.
Cordialement,
--
Olivier Miakinen
SAM
> Le 22/10/2010 14:24, SAM m'a rï¿œpondu :
>>> <http://meyerweb.com/eric/css/edge/slantastic/demo2.html>.
>>
>> C'est bien une dï¿œmo qui pourtant pour moi ne m'aurait certainement pas
>> aidￜ ￜ comprendre
>> (c'est lequel de tous ces divs en float+clear qui autorise celui normal
>> ￜ remonter ... tout en haut ?!)
>
> Eh bien aucun d'entre eux ne ￜ l'autorise ￜ ￜ remonter : il remonte
> parce qu'aucun d'entre eux ne lui *interdit* de le faire !
ï¿œa alors !
On retrouve le raisonnement de l'esspert en RegExp et grammaire ;-)
Les dï¿œblocages ï¿œa a vraiment du bon ;-)
> Ce que je ne comprends pas, en revanche, c'est pourquoi Eric Meyer
> ￜtait obligￜ d'alterner les ￜlￜments en left et ceux en right, et
> surtout en quoi c'est une consï¿œquence du respect strict de la norme.
Le respect de la "norme" ... comme je n'y comprends rien ...
(je ne sais ni oￜ elle est, ni ne connais son langage ...)
Le mieux s'est d'essayer-voir si en les groupant ï¿œa fonctionne.
J'en bloque un ￜ gauche et un autre ￜ droite
J'en bloque un ￜ gauche et un autre ￜ droite
J'en bloque un ￜ gauche et un autre ￜ droite
ou
J'en bloque un ￜ gauche et un autre ￜ gauche et un autre ￜ gauche.
J'en bloque un ￜ droite et un autre ￜ droite et un autre ￜ droite.
et alors est-ce que ceux de droite vont remonter ?
Non.
Pourquoi ?
grmbl grrmblbl ... scratch ... scrtch ... grrmmbl ? ? ?
Tiens ?
Quand on les alterne, peu importe qu'on commence par ceux de gauche ou
de droite !
Aldo M.
>
>> [...]
>>
>> - l'illusion est renforcï¿œe pas une astuce sur les bordures
>
> Oui, c'est un truc qui m'a un temps bloquￜ la comprenette aussi.
> Maintenant c'est bon.
D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces
bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusￜ le
pourquoi du comment, a priori le fait que la hauteur du div soit nulle
(je l'aurais tentￜ avec 1px, moi...) aide ￜ faire cette oblique
parfaite, mais seulement 10 div de largeur dï¿œcroissante pour un
"dￜgradￜ" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop.
Pas du tout, mï¿œme !
> Encore merci ￜ toi, et ￜ tous les autres qui sont intervenus sur cette
> question (en particulier Aldo avec son pointeur vers le site d'Eric Meyer).
De rien !
--
Aldo M.
Aldo M.
>
> D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces
> bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusￜ le
> pourquoi du comment, a priori le fait que la hauteur du div soit nulle
> (je l'aurais tentￜ avec 1px, moi...) aide ￜ faire cette oblique
> parfaite, mais seulement 10 div de largeur dï¿œcroissante pour un
> "dￜgradￜ" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop.
> Pas du tout, mï¿œme !
Oups, ok, j'ai compris, grￜce ￜ lui, en fait :
http://fourshapes.com/articles/2006/07/11/diagonal-lines-in-css/
Comme j'utilise toujours (question de goï¿œt, un peu monomaniaque...) ou
presque des border 1px dotted (solid ne change rien ￜ l'affaire, notez),
je n'ai pas intￜgrￜ le fait que les bordures se rejoignent (et c'est
logique) en biseau !
La honte et l'opprobre soient sur moi.
--
Aldo M.
SAM
> Le 22/10/2010 11:42, Olivier Miakinen a ï¿œcrit :
>>
>>> [...]
>>>
>>> - l'illusion est renforcï¿œe pas une astuce sur les bordures
>>
>> Oui, c'est un truc qui m'a un temps bloquￜ la comprenette aussi.
>> Maintenant c'est bon.
>
> D'ailleurs, c'est moi qui ai un peu de mal, pour le coup, avec ces
> bordures diagonales en CSS... ;-) J'avoue ne pas avoir creusￜ le
> pourquoi du comment, a priori le fait que la hauteur du div soit nulle
> (je l'aurais tentￜ avec 1px, moi...) aide ￜ faire cette oblique
> parfaite, mais seulement 10 div de largeur dï¿œcroissante pour un
> "dￜgradￜ" aussi haut, plus haut que (10 * 0) (!), je ne pige pas trop.
> Pas du tout, mï¿œme !
Le div est de hauteur nulle mais l'espace en hauteur est pris par la
bordure utilisï¿œe
c'est donc la largeur de bordure horizontale qui rï¿œgle la hauteur du
truc restant visible.
La bordure verticale rï¿œglera l'inclinaison.
- largeur bordure basse et bleue, disons 2em
border-bottom: 2em solid blue;
Donc pour une oblique ￜ 60ￜ :
- bordure gauche et blanche : 2 * V3 / 2 = 1.73em
border-left: 1.73em solid white;
- agrandissement largeur du div suivant : 2 * V3 / 2 = 1.73em
Donc pour une oblique ￜ 45ￜ :
- bordure gauche et blanche : 2em
- agrandissement largeur du div suivant : 2em