Réponses:
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>
overflow
été ajouté). Correction du overflow: auto;
height
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:both
pourrait fonctionner pour vous
#element:after {
content:"";
clear:both;
display:block;
}
#element { zoom:1; }
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.
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 div
n'aurait pas de hauteur en raison de ses enfants flottants. Le clearfix obligera le parent à considérer les enfants flottants.
overflow: auto;