Question Quelles méthodes de 'clearfix' puis-je utiliser?


J'ai le problème séculaire d'un div enveloppant une disposition de deux colonnes. Ma barre latérale est flottante, donc mon conteneur div ne parvient pas à envelopper le contenu et la barre latérale.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Il semble y avoir de nombreuses méthodes pour corriger le bug clair dans Firefox:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden

Dans ma situation, le seul qui semble fonctionner correctement est le <br clear="all"/> solution, ce qui est un peu débraillé. overflow:auto me donne des barres de défilement méchant, et overflow:hidden doit sûrement avoir des effets secondaires. En outre, IE7 ne devrait apparemment pas souffrir de ce problème en raison de son comportement incorrect, mais dans ma situation, il souffre le même que Firefox.

Quelle méthode actuellement disponible pour nous est la plus robuste?


809
2017-10-17 08:15


origine


Réponses:


Selon le design produit, chacune des solutions CSS ci-dessous clearfix a ses propres avantages.

Le clearfix a des applications utiles mais il a aussi été utilisé comme un hack. Avant d'utiliser un clearfix, ces solutions CSS peuvent être utiles:


Solutions Clearfix modernes


Conteneur avec overflow: auto;

Le moyen le plus simple d'effacer les éléments flottants est d'utiliser le style overflow: auto sur l'élément contenant. Cette solution fonctionne dans tous les navigateurs modernes.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

Un inconvénient, l'utilisation de certaines combinaisons de marge et de remplissage sur l'élément externe peut provoquer l'apparition de barres de défilement mais cela peut être résolu en plaçant la marge et le remplissage sur un autre élément parent.

L'utilisation de 'overflow: hidden' est aussi une solution de clearfix, mais n'a pas de barre de défilement, mais en utilisant hidden recadra tout contenu placé en dehors de l'élément conteneur.

Remarque: L'élément flottant est un img tag dans cet exemple, mais pourrait être n'importe quel élément html.


Clearfix Reloaded

Thierry Koblentz sur CSSMojo a écrit: Le dernier clearfix rechargé. Il a noté qu'en supprimant le support pour oldIE, la solution peut être simplifiée en une seule déclaration CSS. De plus, en utilisant display: block (au lieu de display: table) permet aux marges de s'effondrer correctement lorsque les éléments avec clearfix sont frères et sœurs.

.container::after {
  content: "";
  display: block;
  clear: both;
}

C'est la version la plus moderne du clearfix.


Solutions Clearfix plus anciennes

Les solutions ci-dessous ne sont pas nécessaires pour les navigateurs modernes, mais peuvent être utiles pour cibler les navigateurs plus anciens.

Notez que ces solutions reposent sur des bogues de navigateur et ne doivent donc être utilisées que si aucune des solutions ci-dessus ne vous convient.

Ils sont répertoriés grossièrement dans l'ordre chronologique.


"Beat That ClearFix", un correctif pour les navigateurs modernes

Thierry Koblentz 'de CSS Mojo a souligné que lorsque vous ciblez les navigateurs modernes, nous pouvons maintenant laisser tomber le zoom et ::before propriété / valeurs et utilisez simplement:

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

Cette solution ne supporte pas IE 6/7 ... exprès!

Thierry propose également: "Un mot d'avertissement: si vous démarrez un nouveau projet à partir de rien, allez-y, mais n'échangez pas cette technique avec celle que vous avez maintenant, car même si vous ne supportez pas oldIE, vos règles existantes empêchent la réduction des marges. "


Micro Clearfix

La solution clearfix la plus récente et la plus adoptée à l'échelle mondiale, la Micro Clearfix par Nicolas Gallagher.

Support connu: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

Propriété de débordement

Cette méthode de base est préférée dans le cas habituel, lorsque le contenu positionné ne s'affiche pas en dehors des limites du conteneur.

http://www.quirksmode.org/css/clearing.html - explique comment résoudre les problèmes courants liés à cette technique, à savoir width: 100% sur le conteneur.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

Plutôt que d'utiliser le display propriété pour définir "hasLayout" pour IE, d'autres propriétés peuvent être utilisées pour déclencher "hasLayout" pour un élément.

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Une autre façon de vider les flotteurs en utilisant le overflow la propriété est d'utiliser le souligner le piratage. IE appliquera les valeurs préfixées avec le caractère de soulignement, les autres navigateurs ne le feront pas. le zoom déclencheurs de propriété hasLayout dans IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Alors que cela fonctionne ... il n'est pas idéal d'utiliser des hacks.


TARTE: Méthode d'effacement facile

Cette ancienne méthode "Easy Clearing" a l'avantage de permettre aux éléments positionnés de sortir des limites du conteneur, au détriment de CSS plus compliqués.

Cette solution est assez ancienne, mais vous pouvez tout apprendre sur Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html


Elément utilisant la propriété "clear"

La solution rapide et sale (avec quelques inconvénients) pour quand on tape rapidement quelque chose ensemble:

<br style="clear: both" /> <!-- So dirty! -->

Désavantages

  • Il n'est pas réactif et peut donc ne pas fournir l'effet désiré si les styles de mise en page changent en fonction des requêtes média. Une solution en CSS pure est plus idéale.
  • Il ajoute un balisage html sans nécessairement ajouter de valeur sémantique.
  • Il nécessite une définition et une solution en ligne pour chaque instance plutôt qu'une référence de classe à une seule solution d'un "clearfix" dans les références css et de classe dans le html.
  • Cela rend le code difficile à utiliser pour les autres car ils peuvent avoir à écrire plus de hacks pour contourner ce problème.
  • À l'avenir, lorsque vous aurez besoin d'une autre solution de clearfix, vous n'aurez plus besoin d'y retourner <br style="clear: both" /> tag jonchant autour du balisage.

1006
2017-10-27 19:37



Quels problèmes essayons-nous de résoudre?

Il y a deux considérations importantes lors de la flottaison:

  1. Contenant des flottants descendants. Cela signifie que l'élément en question se rend suffisamment grand pour envelopper tous les descendants flottants. (Ils ne pendent pas dehors.)

    Floating content hanging outside its container

  2. Les descendants isolants des flotteurs extérieurs. Cela signifie que les descendants à l'intérieur d'un élément devraient pouvoir utiliser clear: both et ne pas interagir avec les flotteurs à l'extérieur de l'élément.

    <code>clear: both</code> interacting with a float elsewhere in the DOM

Bloquer les contextes de mise en forme

Il n'y a qu'une seule façon de faire les deux. Et c'est d'établir une nouvelle contexte de mise en forme du bloc. Les éléments qui établissent un contexte de mise en forme de bloc sont un rectangle isolé dans lequel les flottants interagissent les uns avec les autres. Un contexte de mise en forme de bloc sera toujours suffisamment grand pour envelopper visuellement ses descendants flottants, et aucun flottant en dehors d'un contexte de mise en forme de bloc ne peut interagir avec des éléments à l'intérieur. Cette isolation à deux voies est exactement ce que vous voulez. Dans IE, ce même concept est appelé hasLayout, qui peut être réglé via zoom: 1.

Il existe plusieurs façons d'établir un contexte de mise en forme de bloc, mais la solution que je recommande est display: inline-block avec width: 100%. (Bien sûr, il y a les mises en garde habituelles avec utilisation width: 100%, alors utilisez box-sizing: border-box ou mettre padding, margin, et border sur un élément différent.)

La solution la plus robuste

L'application la plus courante des flotteurs est probablement la disposition en deux colonnes. (Peut être étendu à trois colonnes.)

D'abord la structure de balisage.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

Et maintenant le CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Essayez-le vous-même

Aller à JS Bin pour jouer avec le code et voir comment cette solution est construite à partir de zéro.

Les méthodes traditionnelles de clearfix considérées comme nocives

Le problème avec le traditionnel clearfix  solutions est qu'ils utilisent deux concepts de rendu différents pour atteindre le même objectif pour IE et tout le monde. Dans IE, ils utilisent hasLayout pour établir un nouveau contexte de mise en forme de bloc, mais pour tout le monde, ils utilisent des boîtes générées (:after) avec clear: both, ce qui n'établit pas un nouveau contexte de formatage de bloc. Cela signifie que les choses ne se comporteront pas de la même manière dans toutes les situations. Pour une explication de pourquoi c'est mauvais, voir Tout ce que vous savez sur Clearfix est erroné.


67
2018-03-29 19:54



La nouvelle norme, utilisée par Inuit.css et Bourbon - deux frameworks CSS / Sass très utilisés et bien entretenus:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

Remarques

Gardez à l'esprit que clearfixes sont essentiellement un hack pour ce que les dispositions flexbox peuvent maintenant fournir dans un beaucoup plus intelligent. Les flottants CSS ont été conçus à l'origine pour que le contenu en ligne circule - comme les images dans un long article textuel - et non pour les dispositions de grille et autres. Si ton les navigateurs cibles prennent en charge flexbox, ça vaut la peine de regarder.

Cela ne supporte pas IE7. Toi ne devrait pas supporter IE7. Cela continue à exposer les utilisateurs à des exploits de sécurité non corrigés et rend la vie plus difficile pour tous les autres développeurs Web, car elle réduit la pression sur les utilisateurs et les organisations pour passer aux navigateurs modernes.

Ce clearfix était annoncé et expliqué par Thierry Koblentz en juillet 2012. Il élimine le poids inutile Micro-clearfix 2011 de Nicolas Gallagher. Dans le processus, il libère un pseudo-élément pour votre propre usage. Cela a été mis à jour pour utiliser display: block plutôt que display: table (encore une fois, crédit à Thierry Koblentz).


53
2018-04-19 07:28



Je recommande d'utiliser ce qui suit, qui est tiré de http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */
.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

27
2017-09-27 15:16



La propriété overflow peut être utilisée pour effacer les flottants sans majoration supplémentaire:

.container { overflow: hidden; }

Cela fonctionne pour tous les navigateurs sauf IE6, où tout ce que vous avez à faire est d'activer hasLayout (le zoom étant ma méthode préférée):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html


23
2018-02-10 11:20



J'ai trouvé un bug dans la méthode CLEARFIX officielle: Le DOT n'a pas de taille de police. Et si vous définissez le height = 0 et le premier Element de votre DOM-Tree a la classe "clearfix" vous aurez toujours une marge au bas de la page de 12px :)

Vous devez le réparer comme ceci:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Il fait maintenant partie de la mise en page YAML ... Jetez un coup d'œil - c'est très intéressant! http://www.yaml.de/en/home.html


17
2018-01-20 15:50



C'est une solution tout à fait propre:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Il est connu pour fonctionner dans Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Y compris le: avant sélecteur n'est pas nécessaire pour effacer les flotteurs,   mais il empêche les marges supérieures de s'effondrer dans les navigateurs modernes. Ce   assure qu'il y a une cohérence visuelle avec IE 6/7 lorsque le zoom: 1 est   appliqué.

De http://nicolasgallagher.com/micro-clearfix-hack/


15
2018-04-21 14:46



Clearfix de bootstrap:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

10
2017-12-05 07:12



Je viens d'utiliser: -

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

Fonctionne mieux et compatible avec IE8 + :)


8
2018-02-21 13:03