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?

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:

• css flexbox
• grille css

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.

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

   

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.

   

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

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

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

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

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

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/

Clearfix de bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

J'utilise juste: -

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

Fonctionne mieux et compatible avec IE8 + :)

É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 ):

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!

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

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.

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

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

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.

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

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

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.

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

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 .

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

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

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.

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 .

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

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

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

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.