Quelles méthodes de «clearfix» puis-je utiliser?


864

J'ai le problème séculaire d'un divencapsulage d'une mise en page à deux colonnes. Ma barre latérale est flottante, donc mon conteneur divne 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, la seule qui semble fonctionner correctement est la <br clear="all"/>solution, qui est un peu délabrée. overflow:autome donne des barres de défilement désagréables et overflow:hiddendoit 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 de la même chose que Firefox.

Quelle méthode actuellement à notre disposition est la plus robuste?


1
J'utilise jqui.net/tips-tricks/css-clearfix ça m'aide à cacher le point :)
Val

1
Et IE 6 et IE 7? Ils ne suivent jamais la bonne façon de clarifier les choses.
Praveen Kumar Purushothaman

Maintenant que nous avons un an, y a-t-il une chance de réviser la bonne réponse au correctif moderne à trois lignes décrit ici , tel qu'il est utilisé dans les cadres de grands noms Bourbon et Inuit.css? Voir ma réponse ci-dessous .
iono

Réponses:


1039

Selon la conception produite, chacune des solutions CSS clearfix ci-dessous a ses propres avantages.

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


Solutions Clearfix modernes


Conteneur avec overflow: auto;

La façon la plus simple d'effacer les éléments flottants consiste à utiliser le style overflow: autode l'élément conteneur. 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 entraîner 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 contenant un parent.

L'utilisation de 'overflow: hidden' est également une solution de correction claire, mais n'aura pas de barres de défilement, mais l'utilisation hiddenrecadrera tout contenu positionné en dehors de l'élément contenant.

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


Clearfix Reloaded

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

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

Il s'agit de la version la plus moderne du clearfix.


Anciennes solutions Clearfix

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

Notez que ces solutions dépendent des bogues du navigateur et ne doivent donc être utilisées que si aucune des solutions ci-dessus ne fonctionne pour vous.

Ils sont classés à peu près par ordre chronologique.


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

Thierry Koblentz » de Mojo CSS a souligné que lors du ciblage des navigateurs modernes, nous pouvons maintenant laisser tomber la zoomet ::beforepropriété / valeurs et utilisez simplement:

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

Cette solution ne prend pas en charge IE 6/7… exprès!

Thierry propose également: " Un mot d'avertissement : si vous démarrez un nouveau projet à partir de zéro, 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 effondrement des marges. "


Micro Clearfix

La solution clearfix la plus récente et la plus adoptée au monde, le Micro Clearfix de Nicolas Gallagher .

Prise en charge connue: 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 pour le cas habituel, lorsque le contenu positionné ne s'affichera 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 la configuration width: 100%du conteneur.

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

Plutôt que d'utiliser la displayproprié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 d'effacer les flottants à l'aide de la overflowpropriété est d'utiliser le hack de soulignement . IE appliquera les valeurs précédées du trait de soulignement, contrairement aux autres navigateurs. La zoompropriété déclenche hasLayout dans IE:

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

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


TARTE: Méthode de compensation facile

Cette ancienne méthode "Easy Clearing" a l'avantage de permettre aux éléments positionnés de se suspendre en dehors des limites du conteneur, au détriment d'un CSS plus délicat.

Cette solution est assez ancienne, mais vous pouvez tout savoir sur la compensation facile sur Position Is Everything: http://www.positioniseverything.net/easyclearing.html


Élément utilisant la propriété "clear"

La solution rapide et sale (avec quelques inconvénients) lorsque vous giflez 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 souhaité si les styles de mise en page changent en fonction des requêtes des médias. Une solution en CSS pur est plus idéale.
  • Il ajoute du 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 solution unique de «clearfix» dans le css et des références de classe dans le html.
  • Cela rend le code difficile à utiliser pour les autres, car ils peuvent avoir à écrire plus de hacks pour le contourner.
  • À l'avenir, lorsque vous aurez besoin / souhaitez utiliser une autre solution Clearfix, vous n'aurez pas à revenir en arrière et à supprimer toutes les <br style="clear: both" />balises jonchant le balisage.

25
@David Rivers: La méthode: after n'est pas un hack car elle n'exploite pas une erreur d'analyse dans un navigateur, elle utilise une fonctionnalité de css comme solution. De plus: after sera pris en charge dans les futurs navigateurs, contrairement au hack de soulignement. Idéalement, il y aura une propriété css qui peut être appliquée à un élément qui le fera contenir tout son contenu.
Beau Smith

7
Merci pour la panne. Je trouve la méthode: after "clear clearing" supérieure à "overflow: hidden", car elle ne recadre pas les ombres des boîtes CSS3 ou les éléments positionnés. Les lignes de code supplémentaires en valent vraiment la peine.
Aneon

7
Je ne préconise pas le br clair: les deux solution, mais je ne suis pas d'accord avec votre étiquetage «sale» de celui-ci. L'argument `` ajouter du poids / charger plus lentement '' semble idiot, car il s'agit d'une courte ligne de code html, par rapport aux plusieurs lignes de CSS (que votre navigateur doit également charger). Pour l'argument `` valeur sémantique '', un br avec clair: les deux sont beaucoup plus faciles à comprendre que d'essayer de comprendre un tas de css de peloton d'exécution. br clair: les deux sont courts et simples, et à mon humble avis n'a aucun effet sur le «professionnalisme».
Vigrond

16
Contrairement à la croyance populaire, overflow: hiddenou overflow: autone supprime pas les flotteurs (le classer comme «clearfix» est un terme impropre); au lieu de cela, un élément crée un nouveau contexte de mise en forme dans lequel les flottants peuvent être contenus. Cela provoque l'étirement du conteneur à la hauteur des flotteurs afin de les contenir. Il n'y a aucun dégagement impliqué - cela étant dit, vous pouvez toujours choisir d'effacer, ou de ne pas effacer, les flotteurs dans le conteneur en fonction de votre disposition.
BoltClock

3
Nous ne devrions plus prendre en charge IE7. Veuillez mettre à jour cela avec la méthode à trois lignes décrite ici
iono

70

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

Il y a deux considérations importantes lors du flottement de trucs:

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

    Contenu flottant suspendu à l'extérieur de son conteneur

  2. Isoler les descendants des flotteurs extérieurs. Cela signifie que les descendants à l'intérieur d'un élément doivent pouvoir utiliser clear: bothet ne pas interagir avec les flotteurs à l'extérieur de l'élément.

    <code> clear: les deux </code> interagissent avec un flotteur ailleurs dans le DOM

Contextes de mise en forme des blocs

Il n'y a qu'une seule façon de faire les deux. Et c'est d'établir un nouveau contexte de formatage de bloc . Les éléments qui établissent un contexte de mise en forme de bloc sont un rectangle isolé dans lequel les flotteurs 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 flotteur en dehors d'un contexte de mise en forme de bloc ne peut interagir avec des éléments à l'intérieur. Cette isolation bidirectionnelle est exactement ce que vous voulez. Dans IE, ce même concept est appelé hasLayout , qui peut être défini via zoom: 1.

Il existe plusieurs façons d'établir un contexte de formatage de bloc, mais la solution que je recommande est display: inline-blockavec width: 100%. (Bien sûr, il y a les mises en garde habituelles à l' utilisation width: 100%, donc l' utilisation box-sizing: border-boxou PUT padding, marginet bordersur un autre élément.)

La solution la plus robuste

L'application la plus courante des flotteurs est probablement la disposition à 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

Accédez à JS Bin pour jouer avec le code et voir comment cette solution est conçue à partir de zéro.

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

Le problème avec les solutions clearfix traditionnelles est qu'elles 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 formatage de bloc, mais pour tous les autres, ils utilisent des boîtes générées ( ) avec , qui n'établissent 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 la raison de ce problème , consultez Tout ce que vous savez sur Clearfix est incorrect .:afterclear: both


Quelles sont les "mises en garde habituelles avec l'utilisation width: 100%"? Aussi, proposez-vous d'utiliser zoom: 1au ¶1 du §2?
Baumr

Réponse intéressante, mais qu'en est-il overflow: hidden, quel concept de rendu cela appelle-t-il? Et en quoi cela peut-il être différent hasLayout?
Baumr

C'est vrai, mais si on évite d'utiliser position: absolute, alors ça va et fera partie du même concept de rendu?
Baumr

Je vois. En rendant le concept, je voulais dire si overflow: hiddenapplique une telle chose qui diffère de ce que fait hasLayout?
Baumr

2
En savoir plus sur hasLayoutà stackoverflow.com/questions/1794350/what-is-haslayout . Je pense que c'est synonyme d'établir un nouveau contexte de formatage de bloc. Les éléments qui le font sont essentiellement responsables de la disposition de tous leurs éléments descendants. Un résultat de ceci est que les éléments qui établissent un nouveau contexte de formatage de bloc contiennent des descendants flottants et les flottants à l'extérieur de l'élément n'interagissent pas avec les clear: left|right|bothéléments à l'intérieur. (C'est dans la réponse ci-dessus.)
Chris Calo

54

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

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

Remarques

Gardez à l'esprit que les corrections claires sont essentiellement un hack pour ce que les dispositions flexbox peuvent désormais fournir de manière beaucoup plus intelligente . Les flotteurs CSS ont été initialement conçus pour que le contenu en ligne circule - comme des images dans un long article textuel - et non pour des dispositions de grille et autres. Si vos navigateurs cibles prennent en charge Flexbox , cela vaut la peine d'être étudié .

Cela ne prend pas en charge IE7. Vous ne devriez pas prendre en charge IE7. Cela continue d'exposer les utilisateurs à des exploits de sécurité non corrigés et rend la vie plus difficile à tous les autres développeurs Web, car cela réduit la pression sur les utilisateurs et les organisations pour passer à des navigateurs modernes.

Ce correctif a été annoncé et expliqué par Thierry Koblentz en juillet 2012. Il jette un poids inutile sur le micro-correctif 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: blockplutôt que display: table(encore une fois, crédit à Thierry Koblentz).


3
J'espère que votre réponse suscitera plus de votes à ce sujet, car je suis totalement d'accord avec vous. Encore une fois, c'est 2013 et je crois vraiment que c'est la solution que les gens devraient utiliser.
rafaelbiten

2
D'accord. theie7countdown.com Vérifiez vos propres analyses et espérons que IE7 ne vaut pas votre temps.
Justin

1
@Justin a accepté; vos analyses personnelles le présenteront. Je ne pense pas que le site de compte à rebours ait été mis à jour depuis un certain temps, cependant - il est préférable d'utiliser les statistiques de caniuse qui placent IE7 à 0,39% dans le monde.
iono

1
Espérons que les hacks comme le clearfix seront bientôt rendus inutiles grâce à l'utilisation de flexbox, plutôt que de flottants, pour la mise en page.
iono

Vous pouvez vous opposer à la prise en charge d'IE7 autant que vous le souhaitez, mais s'il y a une exigence de la part de l'entreprise pour soutenir ces utilisateurs (pour différentes raisons - généralement de l'argent), vous allez le faire, peu importe ce que vous ressentez sur le problème
Kris Selbekk

27

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

8
Qui se souvient d'IE-mac maintenant? Pourquoi rendre les choses si compliquées à cause de problèmes qui ne sont plus pertinents?
Ilya Streltsyn

23

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

.container { overflow: hidden; }

Cela fonctionne pour tous les navigateurs sauf IE6, où tout ce que vous devez 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


3
débordement: caché ne fonctionne pas dans le navigateur PS3. Ce n'est pas que la plupart des gens en aient besoin pour travailler, mais c'est la chose la plus importante qui explose mon site dans PS3 que nous essayons de cibler pour des raisons commerciales. Pouah.
gtd

1
Et c'est un problème si vous voulez que certains contenus soient suspendus à l'extérieur du conteneur.
Simon East

débordement: caché a un mauvais effet secondaire d'écrêtage de contenu
Chris Calo

9
overflow:hiddena pour effet d'écraser le contenu; cela a pour effet secondaire de vider le conteneur ;-)
Tamlyn

débordement: auto déclenchera également un contexte de mise en forme de bloc, et il ne coupera pas le contenu.
Harry Robbins

17

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 = 0et le premier élément de votre DOM-Tree a la classe "clearfix", vous aurez toujours une marge en 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;
}

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


15

C'est une bonne solution:

/* 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+

Il n'est pas nécessaire d'inclure le sélecteur: avant pour effacer les flottants, mais il empêche les marges supérieures de s'effondrer dans les navigateurs modernes. Cela garantit la cohérence visuelle avec IE 6/7 lorsque le zoom: 1 est appliqué.

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


1
Oui, à la mi-2011, c'est ma solution préférée. Il vous permet de positionner des objets à l'extérieur de la boîte contenant si nécessaire (éviter overflow: hidden).
Simon East

10

Clearfix de bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

De quelle version de bootstrap est-ce?
Eric

8

J'utilise juste: -

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

Fonctionne mieux et compatible avec IE8 + :)


Ne fonctionnera pas dans IE7 car il ne prend pas en charge les pseudo-éléments CSS.
superluminaire

4
... C'est pourquoi il a dit "compatible avec IE8 +". La plupart des sites Web n'ont plus besoin de prendre en charge IE7, leur utilisation est inférieure à 1% dans le monde. theie7countdown.com
Justin

8

Étant donné l'énorme quantité de réponses que je n'allais pas poster. Cependant, cette méthode peut aider quelqu'un, comme elle m'a aidé.

Restez à l'écart des flotteurs chaque fois que possible

Il convient de mentionner que j'évite les flotteurs comme Ebola. Il y a plusieurs raisons et je ne suis pas seul; Lisez la réponse de Rikudo sur ce qu'est un clearfix et vous verrez ce que je veux dire. Dans ses propres mots:...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

Il existe d'autres bonnes (et parfois meilleures) options que les flotteurs. À mesure que la technologie progresse et s'améliore, la flexbox (et d'autres méthodes) vont être largement adoptées et les flotteurs ne deviendront qu'un mauvais souvenir. Peut-être un CSS4?


Inconduite de flottement et effacements ratés

Tout d'abord, parfois, vous pouvez penser que vous êtes à l'abri des flotteurs jusqu'à ce que votre bouée de sauvetage soit perforée et que votre flux html commence à couler:

Dans le codepen http://codepen.io/omarjuvera/pen/jEXBya ci-dessous, la pratique de nettoyer un flotteur avec <div classs="clear"></div>(ou un autre élément) est courante mais désapprouvée et antisémantique .

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Cependant , juste au moment où vous pensiez que votre flotteur est digne d'une voile ... boum! Comme la taille de l'écran devient de plus en plus petite, vous voyez des comportements étranges comme le graphique ci-dessous (même http://codepen.io/omarjuvera/pen/jEXBya ):

échantillon de bug flottant 1

Pourquoi devriez-vous vous en soucier? Je ne suis pas sûr du chiffre exact, mais environ 80% (ou plus) des appareils utilisés sont des appareils mobiles avec de petits écrans. Les ordinateurs de bureau / ordinateurs portables ne sont plus le roi.


Ça ne s'arrête pas là

Ce n'est pas le seul problème avec les flotteurs. Il y en a beaucoup, mais dans cet exemple, certains diront all you have to do is to place your floats in a container. Mais comme vous pouvez le voir dans le codepen et le graphique, ce n'est pas le cas. Cela a apparemment aggravé les choses:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

Quant au résultat?

C'est le même! exemple de bug flottant 2

Au moins vous le savez, vous allez démarrer une partie CSS, invitant toutes sortes de sélecteurs et de propriétés à la partie; faire un plus gros gâchis de votre CSS que ce que vous avez commencé. Juste pour réparer votre flotteur.


CSS Clearfix à la rescousse

Cette pièce CSS simple et très adaptable est une beauté et un "sauveur":

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

C'est ça! Cela fonctionne vraiment sans casser la sémantique et ai-je mentionné que cela fonctionne? :

Du même échantillon ... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Maintenant, nous n'avons plus besoin de <div classs="clear"></div> <!-- Acts as a wall -->garder la police sémantique heureuse. Ce n'est pas le seul avantage. Ce clearfix est sensible à n'importe quelle taille d'écran sans être utilisé @mediadans sa forme la plus simple. En d'autres termes, il gardera votre flotteur sous contrôle et empêchera les inondations. Enfin, il prend en charge les anciens navigateurs tout en un petit coup de karaté =)

Voici à nouveau le clearfix

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

2
La raison pour laquelle l'élément avec le clearnom de classe ne fonctionne pas est que votre attribut classest incorrect. Ce que vous avez écrit est classs, avec un supplément s.
châtaigne

Votre exemple ne montre pas ce que vous prétendez, même après correction des erreurs.
Rétablir Monica - notmaynard

7

Je flotte toujours les sections principales de ma grille et applique clear: both;au pied de page. Cela ne nécessite pas de div ou de classe supplémentaire.


Neil, je suppose que le problème vient quand vous voulez une bordure autour de vos deux colonnes (ou une couleur / image d'arrière-plan), vous avez besoin d'une section wrapper qui a besoin du hack contenant.
Simon East

5

honnêtement; toutes les solutions semblent être un hack pour corriger un bug de rendu ... je me trompe?

j'ai trouvé que <br clear="all" />c'était le plus simple, le plus simple. voir class="clearfix"partout ne peut pas caresser la sensibilité de quelqu'un qui s'oppose aux éléments de marquage étrangers, n'est-ce pas? vous peignez simplement le problème sur une autre toile.

j'utilise également la display: hiddensolution, ce qui est génial et ne nécessite aucune déclaration de classe supplémentaire ou balisage html ... mais parfois vous avez besoin des éléments pour déborder le conteneur, par exemple. jolis rubans et ceintures


5
overflow: hiddenJe pense que tu veux dire
ajbeaven

Certains recommandent d'utiliser une classe appelée groupe qui rend les choses plus sémantiques. Franchement, je ne sais pas pourquoi cela ne s'est pas produit
Damon

im rétractant totalement cette position. j'utilise juste clearfix maintenant. mais sur des conteneurs très courants, je le "cuit" dans le CSS pour réduire la pollution des attributs de classe. aussi, le nommer «groupe» semble bien. moins de caractères à taper aussi
duggi

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

4

J'ai essayé toutes ces solutions, une grande marge sera ajoutée à l' <html>élément automatiquement lorsque j'utiliserai le code ci-dessous:

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

Enfin, j'ai résolu le problème de marge en ajoutant font-size: 0;au CSS ci-dessus.


2
C'est parce que vous ajoutez une ligne avec ., utilisez simplementcontent: ""
Quarante

4

Avec SASS, le clearfix est:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

et il est utilisé comme:

.container {
    @include clearfix;
}

si vous voulez le nouveau clearfix:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

4

Avec LESS ( http://lesscss.org/ ), on peut créer un assistant clearfix pratique:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

Et puis utilisez-le avec des conteneurs problématiques, par exemple:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>
/* LESS */
div#container {
  .clearfix();
}

4

L'utilisation de overflow:hidden/ autoet de la hauteur pour ie6 suffira si le conteneur flottant a un élément parent.

L'un ou l'autre des #test pourrait fonctionner, pour que le HTML indiqué ci-dessous efface les flottants.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

Dans les cas où cela refuse de fonctionner avec ie6, faites simplement flotter le parent pour effacer float.

#test {
  float: left; // using float to clear float
  width: 99%;
}

Je n'ai jamais vraiment eu besoin d'un autre type de défrichement. C'est peut-être la façon dont j'écris mon HTML.


1
Je voudrais étudier votre façon d'écrire du HTML sans effacer aucun élément. Pourriez-vous publier des liens?
Starx

4

Une nouvelle valeur d'affichage semble à l'emploi sur une seule ligne.

display: flow-root;

D'après la spécification W3: "L'élément génère une boîte de conteneur de blocs et présente son contenu à l'aide de la disposition de flux. Il établit toujours un nouveau contexte de mise en forme de bloc pour son contenu."

Informations: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ Comme indiqué dans le lien ci-dessus, le support est actuellement limité, donc le support de secours comme ci-dessous peut être utile: https://github.com/fliptheweb/postcss-flow-root


3

Je flotterais #contentaussi, de cette façon les deux colonnes contiennent des flotteurs. Aussi parce que cela vous permettra d'effacer les éléments à l'intérieur#content sans effacer la barre latérale.

Même chose avec l'encapsuleur, vous devez en faire un contexte de formatage de bloc pour encapsuler les deux colonnes.

Cet article mentionne quelques déclencheurs que vous pouvez utiliser: bloquer les contextes de mise en forme .


3

Un clearfix est un moyen pour un élément de s'effacer automatiquement après lui-même, de sorte que vous n'avez pas besoin d'ajouter de balisage supplémentaire.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

Normalement, vous devez faire quelque chose comme suit:

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

Avec clearfix, il vous suffit de

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

2

Pourquoi juste essayer d'utiliser le hack css pour faire ce que 1 ligne de HTML fait le travail. Et pourquoi ne pas utiliser le sémantique html tu put break pour revenir à la ligne?

Fo me est vraiment préférable d'utiliser:

<br style="clear:both" />

Et si vous ne voulez pas de style dans votre html, il vous suffit d'utiliser la classe pour votre pause et de mettre .clear { clear:both; }votre CSS.

Avantage de ceci:

  • Utilisation sémantique de html pour le retour à la ligne
  • Si aucune charge CSS ne fonctionnera
  • Pas besoin de code CSS supplémentaire et de piratage
  • pas besoin de simuler le br avec CSS, il existe déjà en HTML

2

En supposant que vous utilisez cette structure HTML:

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

Voici le CSS que j'utiliserais:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

J'utilise cet ensemble tout le temps et cela fonctionne bien pour moi, même dans IE6.


2

Contrairement à d'autres clearfixes, voici un open-end sans conteneurs

D'autres corrections claires nécessitent soit que l'élément flottant soit dans un conteneur bien délimité, soit un supplément sémantiquement vide <div>. Inversement, une séparation claire du contenu et du balisage nécessite une solution CSS stricte à ce problème.

Le simple fait que l'on doive marquer la fin d'un flottant ne permet pas une composition CSS sans surveillance .

Si ce dernier est votre objectif, le flotteur doit être laissé ouvert pour que tout (paragraphes, listes ordonnées et non ordonnées, etc.) puisse s'enrouler autour de lui, jusqu'à ce qu'un "clearfix" soit rencontré. Par exemple, le clearfix peut être défini par un nouveau titre.

C'est pourquoi j'utilise le clearfix suivant avec de nouveaux titres:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

Cette solution est largement utilisée sur mon site Web pour résoudre le problème: le texte à côté d'une miniature flottante est court et la marge supérieure de l'objet de compensation suivant n'est pas respectée.

Il empêche également toute intervention manuelle lors de la génération automatique PDF à partir du site. Voici un exemple de page .


2

J'utilise toujours le micro-clearfix :

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

Dans Cascade Framework, je l'applique même par défaut aux éléments de niveau bloc. IMO, l'appliquer par défaut sur les éléments de niveau bloc donne aux éléments de niveau bloc un comportement plus intuitif que leur comportement traditionnel. Cela m'a également beaucoup facilité l'ajout de la prise en charge des anciens navigateurs à Cascade Framework (qui prend en charge IE6-8 ainsi que les navigateurs modernes).


0

Vous pouvez également mettre cela dans votre CSS:

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

Et ajoutez la classe "cb" à votre div parent:

<div id="container" class="cb">

Vous n'aurez pas besoin d'ajouter autre chose à votre code d'origine ...


0

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}
<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>


-2

Avez-vous essayé ceci:

<div style="clear:both;"/>

Je n'ai eu aucun problème avec cette méthode.


2
Je pense que le fait est que nous essayons d'éviter à la fois le balisage supplémentaire et les styles en ligne avec cette solution. Cela dépend du compromis avec lequel vous êtes le plus heureux, je suppose
Sam Murray-Sutton

1
Le problème avec cette méthode est que dans les navigateurs IE, le div a une hauteur, donc votre espacement sera désactivé. C'est pourquoi les méthodes css définissent la hauteur et la taille de la police.
zznq

vous devez dire <div style = "clear: both"> </div> avec une balise de fermeture appropriée pour être correctement conforme XHTML. J'ai eu des problèmes avec jQuery en ne faisant pas cela
Simon_Weaver

1
Ironiquement, "censé être auto-fermé" <div/> est conforme à X (HT) ML, mais n'est pas compatible HTML , donc pour les documents servis comme text/htmltous les navigateurs le traiteront comme une balise non fermée. Il n'y a pas de balises à fermeture automatique pour les text/htmldocuments, quel que soit le doctype , malheureusement.
Ilya Streltsyn

-2

Ma méthode préférée consiste à créer une classe clearfix dans mon document css / scss comme ci-dessous

.clearfix{
    clear:both
}

Et puis appelez-le dans mon document html comme indiqué ci-dessous

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

-2

C'est si simple que clearfix résout le problème lorsque nous utilisons les propriétés float à l'intérieur de l'élément div. Si nous utilisons deux éléments div, un comme float: left; et l'autre comme flotteur: à droite; nous pouvons utiliser clearfix pour le parent des deux éléments div. Si nous refusons d'utiliser clearfix, les espaces inutiles seront remplis avec le contenu ci-dessous et la structure du site sera cassée.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.