flottant trucs à l'intérieur d'un div, de flotteurs en dehors de la div. Pourquoi?

Question

C'est juste une question de base, mais j'ai eu cela m'arrive à moi une couple de fois et voudrais savoir pourquoi.

Disons que vous avez un div, disons que vous avez la couleur verte et de lui donner une certaine largeur, quand je mets des trucs dans les, dans mon cas, une img et un autre div. L'idée est que le contenu de la div conteneur sera la cause de la div conteneur de s'étirer, et un arrière-plan pour le contenu. Mais quand je fais cela, la div contenant rétrécit pour s'adapter à la non-objets flottants, et les objets flottants seront soit tous le moyen de sortir, ou de la moitié, la moitié, et n'aura aucune influence sur la taille de la grosse div.

Pourquoi est-ce? Il y a une chose qui me manque, et comment puis-je obtenir flottait éléments pour allonger la hauteur d'une div contenant?

Answer 1

Le plus simple est de mettre overflow:hidden sur le div parent et ne pas spécifier une hauteur de:

#parent { overflow: hidden }

Une autre façon est aussi de faire flotter le div parent:

#parent { float: left; width: 100% }

Une autre façon consiste à utiliser un élément clair:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

Answer 2

Mettez votre flottante div(s) en div et en CSS c' overflow:hidden;
cela fonctionnera très bien.

Answer 3

Il n'y a rien de manque. Flotteur a été conçu pour le cas où vous voulez une image (par exemple) de s'asseoir à côté de plusieurs paragraphes de texte, de sorte que le flux de texte autour de l'image. Cela n'arriverait pas si le texte est "tendu" le conteneur. Votre premier paragraphe, ce serait la fin, et puis votre prochain paragraphe commencerait sous l'image (peut-être plusieurs centaines de pixels ci-dessous).

Et c'est pourquoi vous êtes obtenir les résultats que vous.

Answer 4

Comme Lucas dit, ce que vous décrivez est le comportement pour le flotteur de la propriété. Ce qui confond beaucoup de gens est que le flotteur a été poussé bien au-delà de son origine but de l'utilisation, afin de compenser pour les lacunes dans la mise en forme CSS modèle.

Jetez un oeil à Floatutorial si vous souhaitez obtenir une meilleure compréhension de la façon dont cette propriété fonctionne.