web-dev-qa-db-fra.com

Comment faire grandir une div en ayant des flotteurs à l'intérieur

Comment puis-je faire grandir une div quand elle a des flotteurs à l'intérieur? Je sais que définir une valeur pour la largeur et régler le débordement sur les œuvres masquées. Le problème est que j'ai besoin d'une div avec le débordement visible. Des idées?

csshtmloverflowcss-float
116
pedrozath

overflow:auto; sur la div qui le contient, tout ce qu’il contient (même les objets flottants) est visible et la div externe est complètement enveloppé. Voir cet exemple:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}
<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>
267
JakeParis

Il y a plus d'une façon de vider les flotteurs. Vous pouvez en vérifier ici:
http://work.arounds.org/issue/3/clearing-floats/

Par exemple., clear:both pourrait fonctionner pour vous

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }
14
Nikita Rybak

Dans de nombreux cas, overflow: auto; suffira, mais par souci d’achèvement et de prise en charge multi-navigateurs, jetez un œil à Clearfix qui s’appliquera à tous les navigateurs.

Prenons le balisage suivant.

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Avec les styles suivants ..

.content { float:left; }

.clearfix { ..from link.. }

Sans le correctif, le parent div n'aurait pas de hauteur à cause de ses enfants flottants. Le correctif incitera le parent à considérer les enfants flottants.

11
miphe

Je pensais qu'une bonne façon de le faire était de mettre display: table sur le div.

7
pedrozath