flotteur: suppression à gauche, y compris div?

Question

Je ne comprends pas vraiment ce qui se passe ici.

Ceci est mon css et html

#content { 
    -moz-border-radius:10px; 
    background:#F0F0F0; 
    width: 910px; 
    margin: 0 auto; 
    clear: both; 
} 

#content ul { 
list-style: none; 
padding: 0; 
margin: 0; 
} 

<div id="content"> 
    <ul> 
    <li>Foo</li> 
    <li>Bar</li> 
    <li>Baz</li> 
    </ul> 
</div> 

j'obtenir une boîte grise contenant les éléments alignés verticalement. Je veux les aligner horizontalement, et je lis que je dois mettre float: left dans le sélecteur #content ul. Si je le fais, la boîte grise div disparaît et les trois entrées li restent verticales. Si je place le flotteur: à gauche sur un sélecteur #content ul li, les entrées sont maintenant horizontales, mais la boîte englobante disparaît.

Qu'est-ce qui me manque?

Answer 1

Ajoutez une hauteur à l'UL avec vos autres CSS.

#content ul 
{ 
    height: 20px; 
} 

#content ul li 
{ 
    float: left; 
} 

OU vous pouvez utiliser ce qui suit sans une hauteur de l'UL

#content ul li 
{ 
    display: inline; 
} 

OU vous pouvez mettre un élément en dessous de la UL qui efface.

CSS:

.clear 
{ 
    clear: both; 
    height: 1px; 
} 

HTML:

<ul> 
    <li></li> 
    <li></li> 
</ul> 
<div class="clear"></div> 

OU (pour faire bonne mesure), vous pouvez ajouter une hauteur à l'emballage div

CSS:

.wrappingDiv 
{ 
    height: 20px; 
} 

EXPLICATION: Les éléments flottants sont en dehors du flux normal de votre contenu. Les éléments d'emballage ne sont donc pas "au courant" de la hauteur des éléments flottants.

Answer 2

float Les éléments de construction ne forcent pas réellement l'élément de conteneur à se dilater vers le bas pour le maintenir (ils vont flotter au-delà du fond du conteneur). Ce que vous devez faire est d'ajouter un élément après la liste avec clear:both dans le cadre de son style pour le forcer à descendre sous les flottants, et ainsi forcer les limites du conteneur à se développer en dessous des flotteurs. (Vous pouvez également définir une hauteur fixe pour l'élément conteneur.)