Comment empêcher 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 poussent normalement pour s'adapter à leur contenu, l'utilisation de la propriété float peut causer un problème étonnant 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>

dans cet exemple, le div parent n'étendra pas pour contenir ses enfants flottants - il semblera avoir height: 0 .

comment résoudre ce problème?

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

Solution 1

faites flotter le parent.

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

Pros : code sémantique.

Cons : vous pouvez ne pas toujours vouloir que le parent flotte. Même si tu le fais, fais-tu flotter les parents? parent, et ainsi de suite? Devez-vous flotter chaque élément ancêtre?

Solution 2

donne au parent une hauteur explicite.

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

Pros : code sémantique.

Cons : non flexible - si le contenu change ou si le navigateur est redimensionné, la disposition se casse.

Solution 3

Ajouter un élément d'espacement à 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 : simple à coder.

Cons : Non sémantique; la spacer div n'existe que comme un hack de mise en page.

Solution 4

fixe parent à 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 div supplémentaire.

Cons : cela ressemble à un piratage - ce n'est pas le but déclaré de la propriété overflow .

commentaires? D'autres suggestions?

897
demandé sur Nathan Long 2008-10-20 19:10:25
la source

16 ответов

Solution 1:

la méthode la plus fiable et discrète semble être celle-ci:

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 petit CSS ciblé vous n'avez même pas besoin d'ajouter une classe au parent DIV .

Cette solution est à l'envers compatible avec IE8, vous n'avez donc pas besoin de vous inquiéter de l'échec des navigateurs plus anciens.

Solution 2:

une adaptation de la solution 1 a été proposée et se lit 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 rétrocompatible avec IE5.5 mais est non testé.

Solution 3:

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

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

CSS:

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

cette solution doit être rétrocompatible avec IE5.5 mais n'a été testé que dans IE6.

490
répondu A.M.K 2017-04-09 05:25:41
la source

j'utilise habituellement l'astuce overflow: auto ; 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 à se rappeler, certainement. Le sens de float: left lui-même a été étendu pour diverses utilisations plus de manière significative que le débordement est dans cet exemple, IMO.

67
répondu Bobby Jack 2013-10-18 02:33:56
la source

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

le premier CSS que j'écris pour n'importe quelle page web est toujours:

div {
  overflow:hidden;
}

alors je n'ai pas à m'en inquiéter.

20
répondu tybro0103 2013-10-18 02:33:04
la source

le problème se produit lorsqu'un élément flottant se trouve dans un conteneur, cet élément ne force pas automatiquement la hauteur du conteneur à s'ajuster à l'élément flottant. 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 le corriger:

  • { clear: both; }
  • clearfix

une fois que vous comprenez ce qui se passe, utilisez le 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 :)

18
répondu Sarfraz 2013-05-21 22:10:57
la source

il existe plusieurs versions du clearfix, avec Nicolas Gallagher et Thierry Koblentz comme auteurs clés.

si vous voulez prendre en charge des navigateurs plus anciens, il est préférable d'utiliser ce clearfix:

.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 soutien pour navigateurs plus anciens, il ya une version plus courte:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
14
répondu John Slegers 2014-11-29 21:40:42
la source

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 flotteurs à l'intérieur. 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 optez pour IE6 (Dieu vous aide), vous pourriez vouloir donner à cette règle une ligne 0px-hauteur et hauteur aussi.

9
répondu Bryan A 2008-10-20 22:57:43
la source

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) appliquer inline-block seulement aux éléments qui sont normalement en ligne (par exemple span ); et (b) ajouter -moz-inline-box pour Firefox.

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

9
répondu DisgruntledGoat 2009-03-06 02:41:20
la source

Etrange personne N'a encore trouvé de réponse complète à cela, eh bien voilà.

Solution un: clair: les deux

ajout D'un élément de bloc avec le style clair:les deux; sur elle va effacer les flotteurs au-delà de ce point et d'empêcher le parent de cet élément de s'effondrer. http://jsfiddle.net/TVD2X/1 /

Pros: vous permet d'effacer un élément et des éléments que vous ajoutez ci-dessous ne sera pas affecté par les éléments flottants ci-dessus et CSS valide.

inconvénients: nécessite l'autre étiquette pour nettoyer les flotteurs, ballonnement de la marge.

Remarque: Pour revenir à IE6 et pour qu'il fonctionne sur abstinents parents (c'est à dire l'élément d'entrée) vous n'êtes pas en mesure d'utiliser :après.

Solution deux: display: table

Ajouter display:table; à la mère de faire fi de la flotte et affichage avec la bonne hauteur. http://jsfiddle.net/h9GAZ/1 /

Pros: pas de majoration supplémentaire et est beaucoup plus proche. Travaux en IE6+

inconvénients: nécessite un css invalide pour s'assurer que tout se passe bien dans IE6 et 7.

Note: le IE6 et 7 width auto est utilisé pour empêcher la largeur étant 100%+rembourrage, ce qui n'est pas le cas dans les navigateurs plus récents.

Une note sur les autres "solutions"

ces corrections fonctionnent à nouveau vers le navigateur le moins supporté, plus de 1% d'utilisation globalement (IE6), ce qui signifie utiliser :après ne coupe pas.

Overflow hidden montre le contenu mais n'empêche pas l'élément de s'effondrer et ne répond donc pas à la question. L'utilisation d'un bloc en ligne peut avoir des résultats buggy, les enfants ayant des marges étranges et ainsi de suite, la table est beaucoup mieux.

le réglage de la hauteur "empêche" l'effondrement, mais il n'est pas une bonne fixer.

invalide css

CSS invalide n'a jamais fait de mal à personne, en fait, il est maintenant la norme. L'utilisation de préfixes de navigateur est tout aussi non valide que l'utilisation de hacks spécifiques de navigateur et n'a pas d'impact sur l'utilisateur final quoi que ce soit.

en conclusion

j'utilise les deux solutions ci-dessus pour faire réagir correctement les éléments et bien jouer les uns avec les autres, je vous implore de faire la même chose.

9
répondu lededje 2012-10-18 01:18:18
la source

j'utilise 2 et 4 le cas échéant (c'est-à-dire lorsque je connais la hauteur du contenu ou si le débordement ne nuit pas). N'importe où ailleurs, je vais avec la solution 3. Au fait, votre première solution n'a aucun avantage sur la 3 (que je peux repérer) car elle n'est plus sémantique puisqu'elle utilise le même élément factice.

au fait, je ne m'inquiéterais pas que la quatrième solution soit un piratage. Les piratages dans les CSS ne seraient nuisibles que si leur comportement sous-jacent réinterprétation ou autre changement. Comme ça, ton piratage ne marcherait pas. Cependant, dans ce cas, votre piratage repose sur le comportement exact que overflow: auto est censé avoir. Pas de mal à accrocher un tour gratuit.

6
répondu Konrad Rudolph 2008-10-20 19:24:31
la source

ma méthode préférée est d'utiliser une classe clearfix pour l'élément parent

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

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
5
répondu Christian Gray 2013-10-18 02:29:31
la source

L'une des solutions les plus connues est une variante de votre solution numéro 3 qui utilise un pseudo-élément au lieu d'un élément html non sémantique.

ça ressemble à ça...

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

vous placez cela dans votre feuille de style, et tout ce que vous avez besoin est d'ajouter la classe " cf " à l'élément contenant les flotteurs.

ce que j'utilise est une autre variante qui vient de Nicolas Gallagher.

Il fait la même chose, mais il est plus court, semble plus net, et peut - être utilisé pour accomplir une autre chose qui est assez utile - empêcher les marges des éléments de l'enfant de s'effondrer avec ses parents "(mais pour cela, vous avez besoin d'autre chose-lire la suite à ce sujet ici http://nicolasgallagher.com/micro-clearfix-hack / ).

.cf:after {
    content: " ";
    display: table;
    clear: float;
}
4
répondu banzomaikaka 2012-07-21 22:05:52
la source

ajouter ceci dans le div parent en bas

 <div style="clear:both"></div>
3
répondu Leons Kalapurakal 2014-07-01 22:16:48
la source

le principal problème que vous pouvez trouver avec le changement de débordement à auto ou hidden est que tout peut devenir scrollable avec la souris du milieu buttom et un utilisateur peut gâcher la mise en page entière du site.

2
répondu cssisashtandw3tooo 2012-09-24 02:09:38
la source

une autre solution possible qui me semble plus sémantiquement correcte est de changer les éléments intérieurs flottants pour être "display: inline". Cet exemple et ce sur quoi je travaillais quand je suis tombé sur cette page tous les deux utilisent floated divs de la même façon qu'une portée serait utilisée. Au lieu d'utiliser divs, passez à span, ou si vous utilisez un autre élément qui est par défaut 'display: block' au lieu de 'display: inline', changez-le pour 'display: inline'. Je crois que c'est la Solution 100% sémantiquement correcte.

Solution 1, Flottant le parent, est essentiellement de changer le document entier à flotter.

Solution 2, Définir une hauteur explicite, c'est comme dessiner une boîte et dire que je veux mettre une image ici, c'est à dire utiliser ceci si vous faites une étiquette img.

Solution 3, Ajouter une entretoise pour dégager le flotteur, c'est comme ajouter une ligne supplémentaire au-dessous de votre contenu et cela va aussi affecter les éléments environnants. Si vous utilisez cette approche, vous voulez probablement définir le div à hauteur: 0px.

Solution 4, overflow: auto, reconnaît que vous ne savez pas comment présenter le document et vous admettez que vous ne savez pas quoi faire.

2
répondu Jonathan 2013-03-29 20:09:32
la source
2
répondu Mubin 2014-07-01 22:09:46
la source

je crois que la meilleure façon est de mettre clear:both à l'élément à venir.

Voici pourquoi:

Le sélecteur

1) :after n'est pas supporté dans IE6/7 et buggy dans FF3, cependant,

si vous vous souciez seulement de IE8+ et FF3.5+ compensation avec :après est probablement le meilleur pour vous...

2) overflow est censé faire quelque chose d'autre donc ce piratage n'est pas assez fiable.

Note à l'auteur: il n'y a rien de hacky sur le défrichage... Nettoyer signifie sauter les champs flottants. CLEAR est avec nous depuis HTML3 (qui sait, peut-être même plus long) http://www.w3.org/MarkUp/html3/deflists.html , peut-être qu'ils devraient choisir un nom un peu différent comme page: nouveau, mais c'est juste un détail...

0
répondu jave.web 2013-10-18 02:31:33
la source

Autres questions sur layout html css css-float clearfix