Clear et float

bonjour!

Je suis en pleine observation du comportement de float et clear, propriétés intimement liées et aucours d'un test simple, quelque chose m'a intrigué et j'espère que vous pourrez y apporter un explication.
Voici le code:

#glob{
width:60%;
background-color:red;
}
#elem1{
width:250px;
height:95px;
background-color:#999999;
float:left;
}
#elem2{
width:250px;
height:125px;
background-color:#996699;
float:right;
}
#elem3{
width:100px;
height:145px;
background-color:#0066FF;
clear:left;
}
#elem4{
width:250px;
height:155px;
background-color:#333333;
}

C'est #elem3 qui pose problème. L'élément précédent est en float:right.
Si je n'indique pas dans #elem3 la prop. clear:left; (qui empêche un élément flottant de se trouver à sa gauche), le bloc bleu (elem3) subit une réduction de hauteur!
Si j'indique clear, il retrouve sa hauteur normale...
Regardez...
http://fox.rhubarbe.org/private/test_clear.png
Je me demande pourquoi? Pourquoi clear a cet effet sur le bloc? Pouvez-vous m'éclairer car je fais les choses sans comprendre et je n'aime pas ça :s
Merci!
Modifié par foxeye (17 Dec 2005 - 06:14)

Bonjour,

C'est quoi le 'haslayout' qui fonctionne mal dans IE ? J'ai essayé c'est effectivement pas pareil que dans FF

Voir http://test.blog-and-blues.org/haslayout/tests/float4.html pour ce bug précis, ainsi que http://test.blog-and-blues.org/haslayout/trad_temp.html .

Dans IE 5.x et 6.0 Win, certaines propriétés CSS confèrent aux boîtes CSS un état propre à ce navigateur, le layout. L'un de ses effets est, en quelque-sorte, d'isoler des boîtes voisines la surface où s'étend la boîte concernée. C'est l'origine de la plupart des bugs de flottants d'IE (et de beaucoup d'autres).

Ici, la propriété width confère le layout à l'élément en flux, qui ne peut plus s'étendre sous le flottant voisin, et qui se trouve alors rejetté à côté de lui.
Modifié par Laurent Denis (17 Dec 2005 - 09:14)

merci beaucoup pour ta réponse

Dernière petite question si tu me le permets.

Quelle est la différence entre la propriété clear:left et la propriété clear:right?
J'ai bien compris que clear permettait à une boîte de ne pas être adjacente au flottant précédent. J'imagine que left signifie qu'on parle du flottant qui était à sa gauche et right de celui qui est à sa droite et que both parle de tout flottant à la gauche ou à la droite de l'élément.

Est-ce bien cela qu'il faut comprendre?

Au niveau des flottants, apparemment contrairement au positionnement absolu qui ne tient absolument plus compte de ce qui est dans le flux, le flottant sort du flux mais semble malgré tout tenir compte des éléments qui sont encore dans le flux puisque si un bloc est dans le flux au dessus de lui , il reste à sa place et ne fait que se décaler vers la droite ou la gauche.
Au contraire, un élément placé en absolu peut très bien passer au dessus d'un autre. C'est assez curieux de voir comme deux éléments sortis du flux ne se comportent malgré tout pas de la même façon. c'est à devenir fou!
Modifié par foxeye (17 Dec 2005 - 16:35)

Bonsoir,

On peut ranger les 3 schémas de positionnement CSS justement d'après leur degré d'indépendance par rapport au flux :

1. Le positionnement en flux et le positionnement relatif. Dans ce dernier, l'élément est placé en flux, et toutes les dimensions sont calculées en fonction de cette position. Puis, seulement à ce moment là, l'élément est décalé de la valeur de top, left, etc sans que ces dimensions ne soient recalculées. Il peut alors recouvrir un autre élément en flux précédent ou suivant.

2. Le positionnement flottant : l'élément est placé en flux, puis déplacé le plus à droite ou le plus à gauche possible dans son conteneur. Il autorise ensuite les éléments qui le suivent dans le flux à se placer "sur la même ligne" que lui dans la mesure où la place est suffisante. Un flottant recouvre une partie de l'élément en flux qui est à côté de lui, avec des règles très spéciales : il recouvre la boîte de l'élément en flux, mais pas les "boîtes de ligne" qui sont générées par le contenu de celle-ci. C'est pourquoi il ne cache pas le texte, les images, etc.

3. Le positionnement absolue et le positionnement fixe : l'élément est totalement retiré du flux et se place en fonction des coordonnées indiquées dans son plus proche conteneur positionné. Il est totalement indifférent à la présence d'autres éléments, d'où la nécessaire gestion de l'empilement par le z-index.

On voit qu'en fait, il peut y avoir empilement dans les 3 schémas de positionnement. Sans qu'on s'en rende forcément compte, un élément est toujours dans un certain contexte d'empilement...

Pour ce qui est de clear : c'est exactement cela
Modifié par Laurent Denis (17 Dec 2005 - 18:04)

JE te remercie pour ta gentillesse et la clarté de tes explications