Comment gardez-vous les parents de flottaient éléments de s'effondrer?

Question

Bien que des éléments comme l' <div>s poussent normalement pour s'adapter à leur contenu, à l'aide de l' float de la propriété peut causer une surprenante problème de CSS pour les débutants: si flottait éléments non flotté éléments de parent, le parent va s'effondrer.

Par exemple:

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

Le div parent dans cet exemple ne pas étendre à contenir ses flottait enfants -, il semble avoir height: 0.

Comment résoudre ce problème?

Je voudrais créer une liste exhaustive des solutions ici. Si vous êtes au courant de la compatibilité inter-navigateur des questions, veuillez les signaler.

Solution 1

Flotteur de la mère.

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

Pros: la Sémantique du code.
Inconvénients: Vous ne pouvez pas voulez toujours le parent flotté. Même si vous le faites, ne vous flotter les parents parent, et ainsi de suite? Devez-vous flotter chaque élément ancêtre?

Solution 2

Donner le parent explicite de la hauteur.

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

Pros: la Sémantique du code.
Inconvénients: Pas flexible si le contenu change ou le navigateur est redimensionnée, la mise en page de casser.

Solution 3

Ajouter un "spacer" de l'élément à 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>

Pros: très Simple à code.
Cons: Pas de sémantique; l'entretoise div existe seulement comme une mise en page de hack.

Solution 4

Set parent d' overflow: auto.

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

Pros: Ne nécessite pas de supplément de div.
Inconvénients: il Semble que un hack - ce n'est pas l' overflow de la propriété de l'objet déclaré.

Des commentaires? D'autres suggestions?

Answer 1

Solution 1:

Le plus fiable et discrète méthode semble être ceci:

Démo: 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 CSS de ciblage, vous n'avez même pas besoin d'ajouter une classe à la société mère DIV.

Cette solution est compatible avec IE8, donc vous n'avez pas besoin de s'inquiéter sur les anciens navigateurs défaut.

Solution 2:

Une adaptation de la solution 1 a été proposée et est comme suit:

Démo: 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 compatible avec IE5.5 mais n'a pas été testé.

Solution 3:

Il est également possible de définir display: inline-block; et width: 100%; d'émuler un bloc normal élément, tout ne s'effondre pas.

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

CSS:

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

Cette solution doit être compatible avec IE5.5 mais a uniquement été testé sur IE6.

Answer 2

J'ai l'habitude d'utiliser l' overflow: auto astuce; bien que ce n'est pas, à proprement parler, de l'utilisation prévue pour le débordement, il est un peu liée - assez pour le rendre facile à retenir, certainement. Le sens de l' float: left lui-même a été étendu pour diverses utilisations plus significative que le trop-plein est, dans cet exemple, l'OMI.

Answer 3

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

La première CSS j'écris pour n'importe quelle page web est toujours:

div {
  overflow:hidden;
}

Ensuite, je n'ai jamais à vous inquiéter à ce sujet.

Answer 4

Le problème arrive quand une flottait élément est à l'intérieur d'un conteneur de la boîte, cet élément n'est pas automatiquement le conteneur de réglage en hauteur de la flottait élément. Lorsqu'un élément est flottant, ses parents ne contient plus parce que le flotteur est retiré de la circulation. Vous pouvez utiliser 2 méthodes pour résoudre le problème:

• { clear: both; }
• clearfix

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

.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%;
}

Démonstration :)

Answer 5

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

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