Div clear both vraiment utile ?

Bonjour,

Je me pose une question existentielle.

J'ai appris dans des bouquins de CSS la fameuse technique quand on emploie des éléments flottants, qui consiste à mettre une DIV à la fin avec le style "clear:both" pour que le conteneur prenne la hauteur de ce qu'il contient.

Je me demandait si, en mettant simplement un clear:right sur le dernier élément flottant, cela donnait le même résultat ?

Exemple :
(Je met les style dans l'HTML uniquement pour l'exemple, pr simplifier)

<div style="overflow:hidden">
	<div style="float:left"></div>
	<div style="float:left;clear:right"></div>
</div>

au lieu de

<div style="overflow:hidden">
	<div style="float:left"></div>
	<div style="float:left"></div>
	<div style="clear:both"></div>
</div>

Ca marche ou c'est une hérésie ?

(Je sais qu'on peut aussi ajouter clear:both à l'élément suivant dans le flux sans ajouter de DIV inutile sémantiquement parlant, mais je suis perfectionniste et j'aime bien me prendre la tête XD)
Modifié par Tetranima (01 Feb 2011 - 12:14)

Hey,
Si tu mets clear right, le dernier élément ne sera plus flottant...

Bonjour,

Clear permet d'annuler le flottement sur la gauche, la droite ou les deux.

Clear:right; est donc parfaitement fonctionnel pour revenir dans le flux après un élément flottant à droite, mais pas à gauche.

Apparemment, si tu ne souhaites que l'allongement en hauteur de ton élément parent ton "overflow:hidden" appliqué au parent suffit et pas besoin de clear...

un très bon article sur un très bon site expliquant toutes les méthodes :

http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html

et un bonus hors-sujet mais qui peut éviter un arrachage de cheveux sur les clear qui nettoie tous les flottants et même ceux qu'on se douterait pas (ce qui m'est arrivé y a pas longtemps alors je fais passer) :

http://www.blog-and-blues.org/articles/Float, _clear_et_contextes_de_formatage

Ah tiens je ne savait pas pour l'overflow, moi je l'ai ajouté pour corriger un bug d'affichage sous IE6 au départ.
Je vais tester tout ça à l'occasion. Merci

Laurie-Anne a écrit :
Bonjour,

Clear permet d'annuler le flottement sur la gauche, la droite ou les deux.

Clear:right; est donc parfaitement fonctionnel pour revenir dans le flux après un élément flottant à droite, mais pas à gauche.

Je précise que quand je ne met que des flottants à gauche comme ici, c'est que la somme de leurs largeurs est égale à la largeur max du conteneur et qu'il ne reste aucune place pour du contenu sur la même ligne. Donc c'est comme si je faisait un "float:right".