28172 sujets

CSS et mise en forme, CSS3

[résolu] Habitude dans mes css : clear: both;

Bonjour,

Dans mes CSS, j'ai l'habitude, lorsqu'une div parent contient plusieurs div flottantes, d'ajouter le code suivant au style de la div parent :
#div-parent { width: 100%; clear: both; overflow: hidden; }

Cela évite évidemment le "<div style="clear: both;"></div>" dans la CSS.

J'ai vu néanmoins, en lisant aujourd'hui un tutoriel d'alsacreations, que l'on pouvait remplacer ce code par un "overflow: auto;", à placer également dans le style de la div parent.

L'une des 2 solutions est-elle meilleure que l'autre ? La 2ème fonctionne-t-elle sur tous les navigateurs, quels que soient les float:right; ou float:left; des éléments enfants ?
Modifié par Fix (28 Aug 2010 - 16:22)
Bonjour,

Le clear au niveau du parent ne sert strictement à rien. Par contre le overflow qu'il soit placé à auto ou hidden a le même résultat (tant que tu ne fixe pas la hauteur du parent, auquel cas auto fera apparaitre un ascenseur vertical et hidden masquera le contenu en trop).
Ahhh ! J'y vois un peu plus clair. Merci beaucoup.

Encore une question néanmoins : cette manière de faire (utiliser un overflow: hidden; sur la div parente de plusieurs div flottantes) est-elle la meilleure ? (je veux dire : compatible avec tous les navigateurs, sans effet de bord, bref : celle que tout codeur CSS utilise ?)
Lorseque j'ai plusieur div flottant je fait : 

<div id="cont">
  <div id="cont_gauche">Mon div de gauche</div>
  <div id="cont_centre">Mon div du milieu</div>
  <div id="cont_droite">Mon div de droite</div>
  <div class="spacer"></div> [#green]Ce petit div permet de rendre extensible le div cont[/#]
</div>



#cont { width : 100%; height : auto; margin-left : 10px; margin-right : 10px; }
#cont_gauche { float : left; width : 30%; background : red; }
#cont_centre { float : left; width : 30%; background : black; color : white;  margin-left : 5%; }
#cont_droite {  float : left; width : 30%; background : green; color : white; margin-left : 5%; }
.spacer {  clear : both; }


Et ça marche très bien Smiley smile
Avec ce genre de syntaxe j'ai jamais eu de problème avec les navigateurs.
Oui, mais cette solution oblige à ajouter une div vide, alors que l'on peut s'en passer.

Le "overflow: hidden;" me paraît donc une solution meilleure... à moins, justement, qu'elle ne pose problème sur certains navigateurs ? Quelqu'un a-t-il l'habitude de l'utiliser et peut-il confirmer que son utilisation ne pose aucun souci ? Est-ce une solution habituelle ?
Modérateur
Bonjour,

Pour ma part, j'utilise le même principe que iWeeZ, mais j'engraisse davantage le CSS pour m'assurer que ce div supplémentaire n'affecte pas le rendu, et je mets un contenu (nbsp) au div pour m'assurer que le navigateur ne l'ignore pas :


<div class="clear">&nbsp;</div>




div.clear {
clear:both;
margin:0;
padding:0;
height:0;
line-height:0;
font-size:0;
}


Cela a toujours très bien fonctionné sur tous les navigateurs, mais comme j'utilise cette technique depuis plusieurs années, c'est possible que maintenant ce ne soit plus nécessaire de le faire.
Modifié par Tony Monast (28 Aug 2010 - 15:25)
Hello,

et pour élargir les points de vue je préfère de mon côté toujours utiliser (quand ça n'a pas d'autre impact) overflow:hidden qui permet de ne pas rajouter un élément dans le code HTML. Smiley smile

Sauf si un élément est déjà disponible auquel cas je lui affecte le clear.
Personnellement, j'utilise les deux solutions : le clear si j'ai un élément qui suit les flottants (typiquement le footer) et overflow sinon.
Fix a écrit :

Encore une question néanmoins : cette manière de faire (utiliser un overflow: hidden; sur la div parente de plusieurs div flottantes) est-elle la meilleure ? (je veux dire : compatible avec tous les navigateurs, sans effet de bord, bref : celle que tout codeur CSS utilise ?)

Non pas IE6 auquel il faut ajouter une propriété conférant le layout (faire une recherche sur Alsa si tu ne sais pas ce que c'est) si ce n'est pas déja le cas, sur le bloc conteneur.
Il n'y a pas de meilleur méthode, tout dépend de tes besoin mais le overflow:hidden fonctionne dans de nombreux cas. Une autre méthode consiste à attribuer un display:inline-block au bloc conteneur (c'est la solution la plus simple dans certains cas : pas besoin de layout pour IE6).

Sinon et si le overflow:hidden ou le display:inline-block posent problème (ça peut arriver) tu peux utiliser la nouvelle technique de dégagement (clear) : http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ Smiley cligne
Modifié par Hermann (28 Aug 2010 - 18:12)
Pour ajouter mon grain de sel, je dirai que depuis que j'utilise le display:inline-block en lieu et place du float, j'ai beaucoup moins de problèmes. J'utilise maintenant très rarement le float et ça évite d'avoir une div qui fait le clear:both.

Concernant le overflow:hidden, à partir du moment où tu as des dimensions fixes, je trouve que ça ne coute rien de le mettre pour éviter les problèmes avec des flottants enfants mais aussi avec les images de fond.
Sujet clos
Aller à