pourquoi flotter suivi de vide

Question

Que signifie flotter à gauche, puis effacer à gauche. Ou flotter à gauche, puis effacer à droite? Quelqu'un peut-il m'aider à comprendre cela. Je ne suis pas un type CSS, mais j'ai besoin de comprendre certains des CSS avec lesquels je travaille.

#elem1{ 
    float:left; 
    clear:left; 
} 

#elem2{ 
    float:left; 
    clear:right; 
} 

Answer 1

Si vous faites flotter deux éléments ensemble, ils s'aligneront sur le même axe horizontal si vous n'appliquez pas de suppression. En disant un élément flottant à effacer, il efface tous les flottants qui viennent avant, puis flotte lui-même là où le concepteur a l'intention de le faire flotter. Il ira sur une nouvelle ligne, ou non, en fonction de la direction du clair.

Voir ce jsFiddle example pour une visualisation. Les deux premiers <div> s n'effacent rien, tandis que les deux derniers <div> sont réglés pour effacer les flottants gauche et droit.

Answer 2

clear signifie de positionner l'élément en dessous de éléments flottants précédents, pour "effacer la ligne".

Habituellement éléments flottants s'empilent sur la même ligne comme celui-ci:

--- --- --- 
| | | | | | 
--- --- --- 

les Démontrant des éléments flottants précédents feront les arranger comme ceci:

--- 
| | 
--- 
--- 
| | 
--- 
--- 
| | 
--- 

Answer 3

est ici une vision plus claire pourquoi un clair est nécessaire. http://www.quirksmode.org/css/clearing.html