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

CSS, attribut "clear"

58 réponses
Avatar
Mihamina Rakotomandimby
Bonjour,

J'ai beau regarder les docs et les tutoriels existants, je ne trouve pas
d'explication satisfaisante sur l'usage et la signification de "clear".

Ce que je ne comprend pas c'est:
- qu'est-ce qui passe à la ligne apres le "clear"?
- qu'est ce que "clear" chamboule?

Jusque là je n'ai pas eu obligation de l'utiliser, mais je vois par
exemple que Joomla (les templates joomlart, plus exactement) l'utilise
beaucoup, et quand je customise ces templates en enlevant le "clear", ça
ne change pas grand chose...

En gros, j'ai regardé la théorie, je comprends pas.
J'ai expérimenté sur des cas de la vraie vie, je comprends pas.

Peut-être un des contributeurs de ce groupe aurait le "truc" qui
m'aiderai :)

Merci d'avance.

--
Huile Essentielle de Camphre http://www.huile-camphre.fr
Infogerance http://www.infogerance.us
(Serveurs, Postes de travail, Développement logiciel)

10 réponses

1 2 3 4 5
Avatar
Sergio
Mihamina Rakotomandimby a présenté l'énoncé suivant :
Bonjour,

J'ai beau regarder les docs et les tutoriels existants, je ne trouve pas
d'explication satisfaisante sur l'usage et la signification de "clear".

Ce que je ne comprend pas c'est:
- qu'est-ce qui passe à la ligne apres le "clear"?
- qu'est ce que "clear" chamboule?

Jusque là je n'ai pas eu obligation de l'utiliser, mais je vois par exemple
que Joomla (les templates joomlart, plus exactement) l'utilise beaucoup, et
quand je customise ces templates en enlevant le "clear", ça ne change pas
grand chose...

En gros, j'ai regardé la théorie, je comprends pas.
J'ai expérimenté sur des cas de la vraie vie, je comprends pas.

Peut-être un des contributeurs de ce groupe aurait le "truc" qui m'aiderai :)



Il me semble que c'est l'équivalent de la propriété HTML "clear". En
gros, si t'as des blocs (image...) autour desquels coule ton texte,
après le "clear", le texte qui suit passe obligatoirement en-dessous
des dits blocs (du moins en clear:both, les autres modes étant assez
obscurs).

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
SAM
Mihamina Rakotomandimby a écrit :
Bonjour,

J'ai beau regarder les docs et les tutoriels existants, je ne trouve pas
d'explication satisfaisante sur l'usage et la signification de "clear".



pourtant c'est très clair :

"Cette propriété indique quels côtés d'une ou des boîtes d'un élément ne
doivent pas être adjacents à une boîte flottante précédente."

<http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-clear>

Ce que je ne comprend pas c'est:
- qu'est-ce qui passe à la ligne apres le "clear"?



c'est "avant" que ça se passe (je dirais : maintenant)

- qu'est ce que "clear" chamboule?



c'est censé stopper une flottaison

exemple
- une image en float:right
- du texte (qui va couler à gauche de l'image)
- un nouveau texte dont on veut absolument qu'il commence après l'image
hop! clear:right;

En gros, j'ai regardé la théorie, je comprends pas.
J'ai expérimenté sur des cas de la vraie vie, je comprends pas.



c'est paske tu n'as regardé qu'avec des navigateurs assez récents, sans
doute ?

Peut-être un des contributeurs de ce groupe aurait le "truc" qui
m'aiderai :)



<http://cjoint.com/data/dslxpLMoe4_flottage.htm>

--
sm
Avatar
unbewusst.sein
Sergio wrote:


Il me semble que c'est l'équivalent de la propriété HTML "clear". En
gros, si t'as des blocs (image...) autour desquels coule ton texte,
après le "clear", le texte qui suit passe obligatoirement en-dessous
des dits blocs (du moins en clear:both, les autres modes étant assez
obscurs).



j'ai eu un pb avec un clear, le code :
css :
div.clear {
clear:both;height:1px;overflow:hidden;
}

html :
<div class="clear"></div>

ça, ça marche comme je veux...

MAIS, le fichier (x)html est parsé/modifié par un proc xml qui me
retourne, au lieu du tag div ci-dessus :
<div class="clear"/>
et là, patatrac ça fout par terre le clear:both;

normal docteur ?

bon, j'ai trouvé un subterfuge en plaçant une espace insécable dans la
div :
<div class="clear"> </div>
espace_insécable_________^

et là, comme le proc xml ne peut modifier, ça roule...

je poste ça car j'ai mis pas mal de temps à comprendre que mon layout
avait été complétement chamboulé par le passage de '<div
class="clear"></div>' à '<div class="clear"/>'...

--
Une Bévue
Avatar
SAM
Une Bévue a écrit :

je poste ça car j'ai mis pas mal de temps à comprendre que mon layout
avait été complétement chamboulé par le passage de '<div
class="clear"></div>' à '<div class="clear"/>'...



Pourtant il est usuel d'avoir :

<hr class="clear" />

et que ça fonctionne, non ?

--
sm
Avatar
SAM
Sergio a écrit :

Il me semble que c'est l'équivalent de la propriété HTML "clear". En
gros, si t'as des blocs (image...) autour desquels coule ton texte,
après le "clear", le texte qui suit passe obligatoirement en-dessous des
dits blocs (du moins en clear:both, les autres modes étant assez obscurs).



Il n'y a rien d'obscur, sauf la manière dont IE voit la chose :-(

- clear:left; va arrêter la flottaison gauche précédente
et pas celle à droite

- float:left;clear:left;
pareil : doit arrêter la flottaison gauche des précédents
en plus : flotte à gauche
Problème : IE n'y entrave que d'chi

--
sm
Avatar
Olivier Miakinen
Le 18/03/2008 11:39, SAM répondait à Une Bévue :

je poste ça car j'ai mis pas mal de temps à comprendre que mon layout
avait été complétement chamboulé par le passage de '<div
class="clear"></div>' à '<div class="clear"/>'...





Mais je suppose que ton code XHTML était annoncé avec le Content-Type
text/html pour être lisible par Internet Explorer, non ? Dans ce cas,
les navigateurs ne le considèrent pas comme du XML mais comme du HTML
mal formé, et il appliquent donc les règles de HTML dans la mesure de
leurs moyens. Or <div/> n'est pas une syntaxe autorisée en HTML.

Pourtant il est usuel d'avoir :
<hr class="clear" />
et que ça fonctionne, non ?



Oui, mais là c'est exactement l'inverse : contrairement à l'élément DIV
qui est censé avoir du contenu, l'élément HR est censé être vide. Dans
ce cas, c'est la syntaxe <hr></hr> qui risque de poser des problèmes aux
navigateurs.
Avatar
unbewusst.sein
SAM wrote:

> Peut-être un des contributeurs de ce groupe aurait le "truc" qui
> m'aiderai :)

<http://cjoint.com/data/dslxpLMoe4_flottage.htm>




j'ai un besoin "spécifique" c'est une sorte de carte de visite avec, à
gauche, la photo de la trombine du type, à droite son/sesadresse(s)

si je laisse floater normalement c'est pas jojo, j'obtiens :

|---------------| Adresse personnelle:
| |
| photo | 2, rue de la Poupée qui tousse
| | 75016 Paris
| | Adresse travail :
| |
|---------------| 56, rue du Lapin qui fume
75007 Paris

ce qui me gène c'est le retour de "75007 Paris" au dessous de l'image.

je ne maitrise pas la hauteur du texte à droite.

ce que je souhaite obtenir :

|---------------| Adresse personnelle:
| |
| photo | 2, rue de la Poupée qui tousse
| | 75016 Paris
| | Adresse travail :
| |
|---------------| 56, rue du Lapin qui fume
75007 Paris

c'est-à-dire qu'une adresse commencée à droite reste avec son décalage.
le problème ne survient que lorsque j'ai plus d'une adrese à afficher.
quand il y a une seule adresse l'image étant plus haute que le texte,
c'est OK.

--
Une Bévue
Avatar
unbewusst.sein
Olivier Miakinen <om+ wrote:

Mais je suppose que ton code XHTML était annoncé avec le Content-Type
text/html pour être lisible par Internet Explorer, non ?



oui, merci, c'est bien ça ;-)
--
Une Bévue
Avatar
Sergio
Il se trouve que Une Bévue a formulé :
Sergio wrote:

Il me semble que c'est l'équivalent de la propriété HTML "clear". En
gros, si t'as des blocs (image...) autour desquels coule ton texte,
après le "clear", le texte qui suit passe obligatoirement en-dessous
des dits blocs (du moins en clear:both, les autres modes étant assez
obscurs).



j'ai eu un pb avec un clear, le code :
css :
div.clear {
clear:both;height:1px;overflow:hidden;
}

html :
<div class="clear"></div>

ça, ça marche comme je veux...

MAIS, le fichier (x)html est parsé/modifié par un proc xml qui me
retourne, au lieu du tag div ci-dessus :
<div class="clear"/>
et là, patatrac ça fout par terre le clear:both;

normal docteur ?



Perso, je fais :

<br style="clear:both" />

Voire, quand on n'est pas obsédé par les CSS et qu'on n'a pas peur des
"deprecated" :
<br clear="all" />

Là ça passe à tous les coups...

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
Thibault Jouan
On 2008-03-18, Une Bévue wrote:
ce que je souhaite obtenir :

|---------------| Adresse personnelle:
| |
| photo | 2, rue de la Poupée qui tousse
| | 75016 Paris
| | Adresse travail :
| |
|---------------| 56, rue du Lapin qui fume
75007 Paris

c'est-à-dire qu'une adresse commencée à droite reste avec son décalage.
le problème ne survient que lorsque j'ai plus d'une adrese à afficher.
quand il y a une seule adresse l'image étant plus haute que le texte,
c'est OK.



Ce que je ferai, c'est faire flotter l'image *et* l'adresse :

#img,
#addr {
float: left;
}

En supposant que #img est l'image est #addr le conteneur de tes
adresses. Je rajouterai aussi un clear après le conteneur de ces deux
éléments.

--
Thibault Jouan
1 2 3 4 5