Comment faire grossir un div tout en ayant des flotteurs à l'intérieur

121

Comment puis-je faire augmenter la hauteur d'un div quand il contient des flotteurs? Je sais que définir une valeur pour la largeur et définir le débordement sur des œuvres cachées. Le problème est que j'ai besoin d'un div avec le débordement visible. Des idées?

css html overflow css-float pedrozath
la source

Réponses:

278

overflow:auto;sur le div contenant rend tout ce qui se trouve à l'intérieur (même les éléments flottants) visible et le div externe s'enroule entièrement autour d'eux. 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>
Développer l'extrait

JakeParis
la source
7
Ouais, ça marche un peu, mais ça risque de générer des barres de défilement ... non?
pedrozath
1
Non, pas que je connaisse @pedro. La division externe doit continuer à s'étendre pour envelopper les div internes. essayez-le dans le violon, augmentez les dimensions des divs intérieurs et voyez ce qui se passe.
JakeParis
2
J'ai essayé cela et une minuscule barre de défilement d'environ 2em de haut est apparue à droite de la fenêtre du navigateur.
Nigel Alderton
1
@NigelAlderton cela se passait pour moi parce que je forçais la hauteur du conteneur (où le a overflowété ajouté). Correction du overflow: auto;height
problème
16

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

Par exemple, cela clear:bothpourrait fonctionner pour vous

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

#element { zoom:1; }
Nikita Rybak
la source
1
L'avantage de cette approche est de overflow: auto;couper le contenu (comme les décorations de mise au point) qui débordent à l'extérieur de l'élément, mais ce ne sera pas le cas.
Dan
overflow: auto a créé une barre de défilement horizontale pour moi, donc je ne pouvais pas l'utiliser. Cela a parfaitement fonctionné.
Edwin Stoteler
Exactement ce que je cherchais. Appliqué ce CSS au parent. Il étend la hauteur du parent <div>, de sorte que l'élément flottant reste à l'intérieur. Élégant, car il stipule clairement que: "le bas du parent doit effacer le flotteur".
IAM_AL_X
12

Dans de nombreux cas, overflow: auto;cela suffira, mais dans un souci de complétion et de prise en charge de plusieurs navigateurs, jetez un œil à Clearfix qui fera le travail pour tous les navigateurs.

Considérons 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 clearfix, le parent divn'aurait pas de hauteur en raison de ses enfants flottants. Le clearfix obligera le parent à considérer les enfants flottants.

miphe
la source
2
Clearfix est un balisage supplémentaire. Donnez simplement le balisage au div parentoverflow: auto;
JakeParis
7

J'ai pensé qu'une excellente façon de le faire était de se mettre display: tablesur le div.

pedrozath
la source