css float/positioniong

Question

Le vert est en taille réelle (moins le rembourrage, etc.); Le bleu devrait flotter à gauche et avoir une largeur spécifique; Le rouge devrait flotter à droite et avoir une largeur spécifique. Cependant, je suis en train de tout chambouler. Les deux divs bleu et rouge flottent en dehors de la div principale. Qu'est-ce que je fais mal ici?

Voici mon code actuel:

<div style="border: 2px solid black; width: 630px;"> 
    <div style="width:auto;">Lorem ipsum</div> 
    <div style="width:150px; float:left;">This is the blue box</div> 
    <div style="width:150px; float:right;">This is the red box</div> 
</div> 

Ideal Float http://www.mfrl.org/images/howtofloat.png

Answer 1

Positionnement des flotteurs est drôle. Fondamentalement, la div principale ne prend pas en compte la hauteur des éléments flottants lors de la détermination de sa propre hauteur. Le moyen le plus simple de résoudre ce problème consiste à ajouter un élément d'effacement après les éléments flottants.

Ce violon doit s'expliquer clairement: http://jsfiddle.net/QQxb3/2/

Je pense que les gens qui ont commenté votre message en disant qu'il fonctionne doit avoir mal compris ce que vous entendez par « principal div », parce que la spécification, qui Chrome ne suit et IE suit dans ce cas particulier, placerait les éléments flottants en dehors de son div parent.