Question Comment empêchez-vous les parents d'éléments flottants de s'effondrer? [dupliquer]


Cette question a déjà une réponse ici:

Bien que des éléments comme <div>s grandissent normalement pour s'adapter à leur contenu, en utilisant le float propriété peut provoquer un problème saisissant pour les débutants CSS: Si les éléments flottants ont des éléments parents non flottants, le parent s'effondrera.

Par exemple:

  <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

Le div parent dans cet exemple sera ne pas développer pour contenir ses enfants flottés - il semblera avoir height: 0.

Comment pouvez-vous résoudre ce problème?

Je voudrais créer une liste exhaustive de solutions ici. Si vous êtes conscient des problèmes de compatibilité entre navigateurs, veuillez les signaler. 

Solution 1

Flotter le parent.

  <div style="float: left;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

Avantages: Code sémantique.
Les inconvénients: Vous ne voulez pas toujours que le parent flotte. Même si vous le faites, faites-vous flotter le parent des parents, et ainsi de suite? Doit-on faire flotter chaque élément ancêtre?

Solution 2

Donnez au parent une hauteur explicite.

    <div style="height: 300px;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

Avantages: Code sémantique.
Les inconvénients: Non flexible - si le contenu change ou si le navigateur est redimensionné, la mise en page sera interrompue.

Solution 3

Ajoutez un élément "spacer" à l'intérieur de l'élément parent, comme ceci:

    <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
        <div class="spacer" style="clear: both;"></div>
    </div>

Avantages: Simple à coder.
Les inconvénients: Pas sémantique; la div d'entretoise n'existe que comme un hack de mise en page.

Solution 4

Définir le parent à overflow: auto.

   <div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

Avantages: Ne nécessite pas de div supplémentaire.
Les inconvénients: On dirait un hack - ce n'est pas le overflow but déclaré de la propriété.

Commentaires? D'autres suggestions?


877


origine


Réponses:


Solution 1:

La méthode la plus fiable et la plus discrète semble être la suivante:

Démonstration http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

Avec un peu de ciblage CSS, vous n'avez même pas besoin d'ajouter une classe au parent DIV.

Cette solution est rétrocompatible avec IE8, vous n'avez donc pas à vous soucier de l'échec des anciens navigateurs.

Solution 2:

Une adaptation sur la solution 1 a été suggérée et est la suivante:

Démonstration http://jsfiddle.net/wXaEH/162/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

Cette solution semble être rétrocompatible avec IE5.5 mais n'a pas été testée.

Solution 3:

Il est également possible de définir display: inline-block; et width: 100%; pour émuler un élément de bloc normal sans s'effondrer.

Démonstration http://jsfiddle.net/SO_AMK/ae5ey/

CSS:

.clearfix {
    display: inline-block;
    width: 100%;
}

Cette solution devrait être rétrocompatible avec IE5.5 mais n'a été testée que dans IE6.


482



J'utilise habituellement le overflow: auto tour; bien que ce ne soit pas, à proprement parler, l'utilisation prévue pour le débordement, il est un peu lié - assez pour le rendre facile à retenir, certainement. Le sens de float: left lui-même a été étendu pour diverses utilisations plus significativement que le débordement est dans cet exemple, IMO.


66



Le problème se produit lorsqu'un élément flottant se trouve dans une boîte de conteneur, cet élément ne force pas automatiquement la hauteur du conteneur à s'ajuster à l'élément flottant. Lorsqu'un élément est flottant, son parent ne le contient plus car le flottant est supprimé du flux. Vous pouvez utiliser 2 méthodes pour le réparer:

  • { clear: both; }
  • clearfix

Une fois que vous comprenez ce qui se passe, utilisez la méthode ci-dessous pour "la corriger".

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Manifestation :)


18



Plutôt que de mettre overflow:auto sur le parent, mettre overflow:hidden

Le premier CSS que j'écris pour une page web est toujours:

div {
  overflow:hidden;
}

Ensuite, je ne dois jamais m'inquiéter à ce sujet.


17



Il existe plusieurs versions de clearfix, avec Nicolas Gallagher et Thierry Koblentz en tant qu'auteurs principaux.

Si vous souhaitez prendre en charge les anciens navigateurs, il est préférable d'utiliser ce correctif:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Dans SCSS, vous devez utiliser la technique suivante:

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

Si vous ne vous souciez pas de la prise en charge des navigateurs plus anciens, il existe une version plus courte:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

12



Bien que le code ne soit pas parfaitement sémantique, je pense qu'il est plus simple d'avoir ce que j'appelle un "clearing div" au fond de chaque conteneur avec des flottants. En fait, j'ai inclus la règle de style suivante dans mon bloc de réinitialisation pour chaque projet:

.clear 
{
   clear: both;
}

Si vous utilisez IE6 (Dieu vous aide), vous pouvez donner à cette règle une hauteur de ligne et une hauteur de 0 px.


9



La solution idéale serait d'utiliser inline-block pour les colonnes au lieu de flotter. Je pense que le support du navigateur est assez bon si vous suivez (a) inline-block seulement aux éléments qui sont normalement en ligne (par exemple span) et (b) ajouter -moz-inline-box pour Firefox.

Vérifiez également votre page dans FF2 parce que j'ai eu une tonne de problèmes lors de l'imbrication de certains éléments (étonnamment, c'est le cas où IE fonctionne beaucoup mieux que FF).


9