web-dev-qa-db-fra.com

Augmenter la hauteur de la division parent contenant des divisions imbriquées flottantes

Je n'arrive pas à agrandir automatiquement la hauteur de mon parent div en fonction de son enfant flottant divs. Tous les enfants flottent, pour prendre de l'espace horizontalement, puis passent à la ligne suivante. Il peut y avoir un nombre variable d'enfants flottants, et le parent doit redimensionner automatiquement sa hauteur. (Le parent div sert de fond à tous les divs flottants). Il existe également un second div sous le parent div qui doit être poussé vers le bas, de sorte qu'il se trouve sous les divs flottants.

Il est extrêmement important que la solution fonctionne dans IE.

htmlcssstyles
46
Louis van Tonder

Si le conteneur parent n'a que des enfants flottants, il n'aura pas de hauteur. L'ajout du CSS suivant au conteneur parent devrait aider:

.parent {
    overflow:hidden;
    width: 100%;
}

Lisez cet article pour en savoir plus: http://www.quirksmode.org/css/clearing.html .

101
sandeep

Vous pouvez insérer un div qui efface les flotteurs après le dernier enfant.

HTML:

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->

violon: http://jsfiddle.net/Rc5J8/

50
Andreas Eriksson

Vous devez clear éléments flottants la hauteur de leurs parents s'effondrer.

La réponse actuellement acceptée est correcte, mais il est généralement préférable de supprimer les flottants en appliquant le hack clearfix ou overflow: hidden à un élément parent enveloppant pour que les marges continuent de fonctionner comme prévu et pour se débarrasser d'un élément HTML vide.

La méthode overflow-:

CSS: 

.wrap { overflow: hidden }
.box  { float: left; }

Annotation: 

<div class="wrap">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

La méthode clearfix-, comme indiqué ci-dessus:

CSS: 

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

.box { float: left; }

Annotation: 

<div class="wrap cf">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>
12
Nils Kaspersson

Vous devez utiliser la technique clearfix sur le div contenant

http://www.webtoolkit.info/css-clearfix.html

Cela supprime la nécessité d'ajouter du balisage supplémentaire.

3
Adam Pope

L'ajout de la propriété overflow css sur l'élément parent résoudra le problème (pas besoin d'un élément div vide et laid pour effacer le flottant):

.parentelement {
    overflow:auto;
    display: block;
    width: 100%;
}

J'ai ajouté les propriétés display et width car certains navigateurs auront besoin de définir ces propriétés.

3
Chtiwi Malek

Vous devez appliquer clearfix au parent car les flottants sont supprimés du flux du document et n'ajoutent pas automatiquement de hauteur au contenu du parent. Clearfix demande au parent de s'étendre à une hauteur suffisamment haute pour effacer son dernier enfant flottant. Cette méthode est bien établie et fonctionne sur tous les navigateurs.

1
wheresrhys