Quelles méthodes de & # 8216; clearfix & # 8217; puis-je utiliser?

https://stackoverflow.com/questions/211383

css
clearfix

03-07-2019
|

Question

J'ai le problème séculaire d'un div encapsulant une mise en page à deux colonnes. Ma barre latérale est flottante, 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 bogue clair dans Firefox:

< br clear = "tout" / >
débordement: auto
débordement: masqué

Dans mon cas, le seul qui semble fonctionner correctement est la solution < br clear = & all; / > , qui est un peu délabrée. overflow: auto me donne des barres de défilement désagréables, 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 mon cas, il souffre de la même chose que Firefox.

Quelle méthode actuellement disponible est la plus robuste?

La solution

En fonction de la conception produite, chacune des solutions CSS clearfix ci-dessous présente des avantages propres.

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

Solutions Clearfix modernes

Conteneur avec `débordement: auto;`

Le moyen le plus simple de supprimer des éléments flottants consiste à utiliser le style overflow: auto sur l'élément qui le contient. 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 faire apparaître des barres de défilement, mais cela peut être résolu en plaçant la marge et le remplissage sur un autre élément contenant le parent.

Utilisation de & # 8216; débordement: masqué & # 8217; est également une solution de clearfix, mais sans barres de défilement. Cependant, l’utilisation de hidden recadrera tout contenu placé en dehors de l’élément conteneur.

Remarque: L'élément flottant est une balise img dans cet exemple, mais peut être n'importe quel élément HTML.

Clearfix Reloaded

Thierry Koblentz sur CSSMojo a écrit: Le tout dernier correctif corrigé . Il a noté qu'en supprimant le support pour oldIE, la solution peut être simplifiée en une déclaration CSS. De plus, l'utilisation de display: block (au lieu de display: table ) permet aux marges de se réduire correctement lorsque les éléments dotés de clearfix sont frères.

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

Ceci est la version la plus moderne du clearfix.

& # 8942;

Solutions Clearfix antérieures

Les solutions ci-dessous ne sont pas nécessaires pour les navigateurs modernes, mais peuvent s'avérer utiles pour cibler des 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 fonctionne pour vous.

Ils sont répertoriés en gros par ordre chronologique.

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

Thierry Koblentz 'de CSS Mojo a indiqué que, lorsque nous ciblons des navigateurs modernes, nous pouvons laisser tomber. les propriétés / valeurs zoom et :: before et utilisez simplement:

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

Cette solution ne prend pas en charge IE 6/7 & # 8230; exprès!

Thierry propose également: une mise en garde : 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 la suppression des marges. "

Micro Clearfix

La solution de 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 dans le cas habituel, lorsque le contenu positionné ne sera pas affiché 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, définir width: 100% sur le conteneur.

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

Plutôt que d'utiliser la propriété display 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 supprimer les éléments flottants à l'aide de la propriété overflow consiste à utiliser la souligner le hack . IE appliquera les valeurs précédées du trait de soulignement, pas les autres navigateurs. La propriété zoom déclenche hasLayout dans Internet Explorer:

.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.

PIE: Méthode de suppression facile

Cet ancien & Easy; Clear Clear " Cette méthode présente l’avantage de permettre aux éléments positionnés d’être suspendus en dehors des limites du conteneur, au détriment de CSS plus compliqués.

Cette solution est assez ancienne, mais vous pouvez tout apprendre sur Clear Clearing: http: / /www.positioniseverything.net/easyclearing.html

Elément utilisant "clair" propriété

La solution rapide et délicate (avec certains inconvénients) lorsque vous claquez rapidement quelque chose ensemble:

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

Inconvénients

Il ne répond pas et risque donc de ne pas fournir l'effet souhaité si les styles de présentation changent en fonction des requêtes de support. Une solution en CSS pur est plus idéale.
Il ajoute un balisage HTML sans nécessairement ajouter de valeur sémantique.
Elle 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 & # 8220; clearfix & # 8221; dans les références css et class en html.
Cela rend le code difficile à utiliser pour les autres utilisateurs, car ils peuvent avoir à écrire plus de hacks pour le contourner.
A l'avenir, lorsque vous aurez besoin / souhaitez utiliser une autre solution de clearfix, vous n'aurez plus besoin de revenir en arrière pour supprimer tous les < br style = "quot: clear: both". balise / > jonchant le balisage.

Autres conseils

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

Il y a deux considérations importantes à prendre en compte lorsqu’il est flottant:

Contenant des flottants descendants. Cela signifie que l'élément en question est suffisamment grand pour englober tous les descendants flottants. (Ils ne traînent pas dehors.)
Isoler les descendants des flotteurs extérieurs. Cela signifie que les descendants d'un élément doivent pouvoir utiliser clear: les deux et ne pas interagir avec les flottants situés à l'extérieur l'élément.

Bloquer les contextes de mise en forme

Il n'y a qu'une seule façon de faire les deux. Et cela consiste à établir un nouveau contexte de mise en forme de bloc . Les éléments qui établissent un contexte de formatage de bloc sont un rectangle isolé dans lequel les flottants interagissent. Un contexte de mise en forme de bloc sera toujours suffisamment grand pour encapsuler 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 à double sens est exactement ce que vous voulez. Dans IE, ce même concept s'appelle hasLayout , ce 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-block avec width: 100% . (Bien sûr, il existe les mises en garde habituelles avec l'utilisation de width: 100% , utilisez donc size-box: border-box ou mettez padding , margin et border sur un élément différent .)

La solution la plus robuste

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

D'abord la structure du 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 vous-même

Accédez à JS Bin pour vous amuser avec le code et voir comment cette solution est construite. le sol vers le haut.

Les méthodes de correction évidentes considérées comme nuisibles

Le problème avec le traditionnel clearfix solutions utilise deux concepts de rendu différents pour atteindre le même objectif pour IE et pour tous les autres. Dans IE, ils utilisent hasLayout pour établir un nouveau contexte de formatage de bloc, mais pour tout le monde, ils utilisent des boîtes générées (: after ) avec clear: both , ce qui ne permet pas d'établir une nouvelle bloquer le contexte de formatage. Cela signifie que les choses ne se comporteront pas de la même manière dans toutes les situations. Pour une explication de la cause de ce problème, consultez Tout ce que vous savez sur Clearfix est faux .

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

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

Notes

Gardez à l’esprit que les correctifs transparents sont essentiellement un hack de ce que les agencements de flexbox peuvent maintenant fournir dans un much manière plus intelligente . Les flottants CSS ont été conçus à l'origine pour que le contenu en ligne puisse circuler - comme les images dans un long article textuel - et non pour les dispositions de grille, etc. Si vos navigateurs cibles prennent en charge flexbox , cela vaut la peine de s'y intéresser.

Cela ne supporte pas IE7. Vous ne devriez pas soutenir IE7. Cela continue d'exposer les utilisateurs à des failles de sécurité non corrigées et complique la tâche de tous les autres développeurs Web, car cela réduit la pression sur les utilisateurs et les organisations pour passer aux navigateurs modernes.

Ce correctif a été annoncé et expliqué par Thierry Koblentz en juillet 2012. Il supprime inutilement le le correctif numérique 2011 de Nicolas Gallagher . . Dans le processus, il libère un pseudo-élément pour votre propre usage. Ceci a été mis à jour pour utiliser display: block plutôt que display: table (là encore, crédit à Thierry Koblentz).

Je recommande d'utiliser les éléments suivants, qui proviennent 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;  
}

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

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

Vous devez résoudre ce problème comme suit:

/* 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 coup d’œil - c’est très intéressant! http://www.yaml.de/en/home.html

C’est une solution plutôt ordonnée:

/* 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 avec Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Y compris le sélecteur: before n'est pas nécessaire pour effacer les flotteurs,   mais cela empêche les marges supérieures de s’effondrer dans les navigateurs modernes. Ce   assure la cohérence visuelle avec IE 6/7 lorsque le zoom est égal à 1   appliquée.

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

Clearfix à partir du bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

Je viens d'utiliser: -

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

Fonctionne mieux et compatible avec IE8 +:)

Compte tenu de l’énorme quantité de réponses que je n’allais pas publier. Cependant, cette méthode peut aider quelqu'un, comme elle m'a aidé.

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

Cela vaut la peine de mentionner, j’évite les flotteurs comme Ebola. Il y a beaucoup de raisons et je ne suis pas seul; Lisez la réponse de Rikudo à propos de qu'est-ce qu'un correctif clair et vous verrez ce que je veux dire. Dans ses propres mots: ... l'utilisation d'éléments flottants pour la mise en page se décourage de plus en plus avec l'utilisation de meilleures alternatives ...

Il existe d’autres bonnes (et parfois meilleures) options autres que les flotteurs. Au fur et à mesure que la technologie avance et s’améliore, flexbox (et d'autres méthodes) disparaissent être largement adopté et les flotteurs ne deviendront plus qu'un mauvais souvenir. Peut-être un CSS4?

Une mauvaise conduite du flotteur et un échec sont effacés

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

Dans le codepen http://codepen.io/omarjuvera/pen/jEXBya ci-dessous , la pratique consistant à effacer un flottant avec & div; class class = = "effacer", > < / 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;
}

Toutefois, , vous pensiez que votre flotteur valait le détour… boum! Lorsque la taille de l'écran devient de plus en plus petite, des comportements étranges apparaissent, comme dans le graphique ci-dessous (Idem http: // codepen .io / omarjuvera / pen / jEXBya ):

exemple de bogue 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 roi.

Cela ne s'arrête pas là

Ce n’est pas le seul problème des flotteurs. Il y en a beaucoup, mais dans cet exemple, certains peuvent dire que tout ce que vous avez à faire est de placer vos flottants dans un conteneur . Mais comme vous pouvez le voir dans la codepen et le graphique, ce n'est pas le cas. Cela a apparemment empiré 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;
}

En ce qui concerne le résultat?

C'est la même chose! exemple de bogue flottant 2

Au moins, vous commencerez une fête CSS, en invitant toutes sortes de sélecteurs et de propriétés à la fête; faire un plus grand désordre de votre CSS que ce que vous avez commencé avec. Juste pour réparer votre float.

CSS Clearfix à la rescousse

Ce morceau de 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é ça marche? :

À partir du même exemple ... 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 */
}

Désormais, nous n'avons plus besoin de < div classs = " clear " > < / div > <! - agit comme un mur - > et rassure la police sémantique. Ce n'est pas le seul avantage. Ce clearfix répond à n’importe quelle taille d’écran sans utiliser @media dans sa forme la plus simple. En d’autres termes, il maintiendra votre conteneur flottant sous contrôle et empêchera les inondations. Enfin, il prend en charge les anciens navigateurs dans une seule petite opération de karaté =)

Voici à nouveau le clearfix

<*>

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

honnêtement; toutes les solutions semblent être un hack pour résoudre un bogue de rendu ... est-ce que je me trompe?

j'ai trouvé < br clear = " all " / > pour être le plus simple, le plus simple. Voir class = "clearfix" partout ne peut pas émouvoir la sensibilité de quelqu'un qui s'oppose à des éléments de balisage superflus, n'est-ce pas? vous ne faites que peindre le problème sur une autre toile.

J'utilise également la solution display: hidden , ce qui est génial et ne nécessite aucune déclaration de classe supplémentaire ni balisage HTML ... mais vous avez parfois besoin d'éléments pour déborder du conteneur, par exemple. jolis rubans et ceintures

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

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

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

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

Avec SASS, le correctif 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;
    }
}

Avec LESS ( http://lesscss.org/ ), il est possible de créer un assistant pratique pour clearfix:

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

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

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Utilisation de overflow: hidden / auto et height pour ie6 suffiront si le conteneur flottant a un élément parent.

L'un ou l'autre des #test peut fonctionner, car le code HTML indiqué ci-dessous permet d'effacer 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, il suffit de faire flotter le parent pour effacer le flottant.

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

Jamais vraiment eu besoin d'un autre type de nettoyage pour le moment. C’est peut-être ainsi que j’écris mon code HTML.

Je ferais aussi flotter #content , afin que les deux colonnes contiennent des flottants. Et aussi parce que cela vous permettra d'effacer des éléments à l'intérieur de #content sans effacer la barre latérale.

Même chose avec le wrapper, vous devez en faire un contexte de formatage de bloc pour envelopper les deux colonnes.

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

Un clearfix est un moyen pour un élément de s’effacer automatiquement après lui-même, afin que vous n'ayez 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 procéder de la manière suivante:

<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! -->

Une nouvelle valeur d'affichage apparaît au travail sur une ligne.

display: flow-root;

A partir de la spécification w3: "L'élément génère une boîte de conteneur de blocs et en affiche le contenu à l'aide d'une présentation de flux. Il établit toujours un nouveau contexte de formatage de bloc pour son contenu. "

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

& # 8251; Comme indiqué dans le lien ci-dessus, la prise en charge étant actuellement limitée, une prise en charge de secours comme ci-dessous peut être utile: https://github.com/fliptheweb/postcss-flow-root

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

Fo me vaut vraiment mieux utiliser:

<br style="clear:both" />

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

Avantage de ceci:

Utilisation sémantique de HTML pour revenir à la ligne
Si aucune charge CSS, cela fonctionnera
Pas besoin de code CSS supplémentaire et Hack
inutile de simuler le br avec CSS, il existe déjà en HTML

En supposant que vous utilisiez cette structure HTML:

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

Voici le CSS que je voudrais utiliser:

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.

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 au niveau du bloc. éléments. IMO, son application par défaut aux éléments de niveau bloc confère aux éléments de niveau bloc un comportement plus intuitif que leur comportement traditionnel. Cela m'a également permis d'ajouter beaucoup plus facilement la prise en charge des navigateurs plus anciens à Cascade Framework (qui prend en charge IE6-8 ainsi que les navigateurs modernes).

Contrairement aux autres correctifs, voici un fichier ouvert sans conteneurs

D'autres correctifs nécessitent soit que l'élément flottant soit dans un conteneur bien délimité, soit un filtre sémantiquement vide supplémentaire. Inversement, une séparation claire du contenu et du balisage nécessite une solution CSS stricte pour résoudre ce problème.



 Le simple fait de marquer la fin d'un flottant ne permet pas de   la typographie CSS sans surveillance  . 

 Si ce dernier objectif est votre objectif, le flotteur doit être laissé ouvert pour quoi que ce soit (paragraphes, listes ordonnées et non ordonnées, etc.), jusqu'à ce qu'un "clearfix" apparaisse. est rencontré. Par exemple, le correctif pourrait être défini par un nouvel en-tête. 

 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 courte et la marge supérieure du prochain objet à clarifier n’est pas respectée. 

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



	
		
	
	
			 Vous pouvez aussi mettre ceci 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 parent: 

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


 Vous n'aurez rien à ajouter à votre code d'origine ... 
	


	
		
	
	
			 
 

#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>


 
	


	
		
	
	
			 Avez-vous essayé ceci: 

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


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


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

.clearfix{
    clear:both
}


 Et 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>



	
		
			Licencié sous: CC-BY-SA avec attribution
			Non affilié à StackOverflow