Eu tenho o antigo problema de divenvolver um layout de duas colunas. Minha barra lateral está flutuando; portanto, meu contêiner divfalha ao quebrar o conteúdo e a barra lateral.

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

Parece haver vários métodos para corrigir o bug claro no Firefox:

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

Na minha situação, o único que parece funcionar corretamente é a <br clear="all"/>solução, que é um pouco desalinhada. overflow:autome dá barras de rolagem desagradáveis ​​e overflow:hiddencertamente deve ter efeitos colaterais. Além disso, o IE7 aparentemente não deve sofrer com esse problema devido ao seu comportamento incorreto, mas na minha situação está sofrendo o mesmo que o Firefox.

Qual método atualmente disponível para nós é o mais robusto?

Dependendo do design que está sendo produzido, cada uma das soluções CSS clearfix abaixo tem seus próprios benefícios.

O clearfix possui aplicativos úteis, mas também foi usado como um hack. Antes de usar um clearfix, talvez essas soluções modernas de CSS possam ser úteis:

• css flexbox
• grade css

Soluções modernas de Clearfix

Recipiente com overflow: auto;

A maneira mais simples de limpar elementos flutuantes é usar o estilo overflow: autono elemento que contém. Esta solução funciona em todos os navegadores modernos.

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

Uma desvantagem, o uso de certas combinações de margem e preenchimento no elemento externo pode fazer com que as barras de rolagem apareçam, mas isso pode ser resolvido colocando a margem e o preenchimento em outro elemento contendo pai.

O uso de 'overflow: hidden' também é uma solução clearfix, mas não terá barras de rolagem; no entanto, o uso hiddenrecortará qualquer conteúdo posicionado fora do elemento que o contém.

Nota: O elemento flutuante é uma imgtag neste exemplo, mas pode ser qualquer elemento html.

Clearfix Reloaded

Thierry Koblentz no CSSMojo escreveu: O mais recente clearfix recarregado . Ele observou que, ao abandonar o suporte ao oldIE, a solução pode ser simplificada para uma instrução css. Além disso, o uso display: block(em vez de display: table) permite que as margens colapsem corretamente quando os elementos com clearfix são irmãos.

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

Esta é a versão mais moderna do clearfix.

⋮

⋮

Soluções Clearfix mais antigas

As soluções abaixo não são necessárias para navegadores modernos, mas podem ser úteis para direcionar navegadores mais antigos.

Observe que essas soluções dependem de erros do navegador e, portanto, devem ser usadas apenas se nenhuma das soluções acima funcionar para você.

Eles são listados aproximadamente em ordem cronológica.

"Beat That ClearFix", uma correção para navegadores modernos

Thierry Koblentz' do CSS Mojo salientou que quando o direcionamento navegadores modernos, agora podemos largar o zoome ::beforepropriedade / valores e simplesmente usar:

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

Esta solução não suporta o IE 6/7 ... de propósito!

Thierry também oferece: " Uma palavra de cautela : se você iniciar um novo projeto do zero, vá em frente, mas não troque essa técnica pela que você tem agora, porque mesmo que você não suporte o oldIE, suas regras existentes impedem margens em colapso ".

Micro Clearfix

A solução clearfix mais recente e adotada globalmente, a Micro Clearfix de Nicolas Gallagher .

Suporte conhecido: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

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

Propriedade de estouro

Esse método básico é preferido no caso usual, quando o conteúdo posicionado não será exibido fora dos limites do contêiner.

http://www.quirksmode.org/css/clearing.html - explica como resolver problemas comuns relacionados a essa técnica, a saber, a configuração width: 100%no contêiner.

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

Em vez de usar a displaypropriedade para definir "hasLayout" para o IE, outras propriedades podem ser usadas para acionar "hasLayout" para um elemento .

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

Outra maneira de limpar carros alegóricos usando a overflowpropriedade é usar o corte de sublinhado . O IE aplicará os valores prefixados com o sublinhado, outros navegadores não. A zoompropriedade dispara hasLayout no IE:

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

Enquanto isso funciona ... não é ideal usar hacks.

TORTA: Método fácil de limpeza

Esse método "Easy Clearing" mais antigo tem a vantagem de permitir que elementos posicionados fiquem fora dos limites do contêiner, às custas de CSS mais complicado.

Esta solução é bastante antiga, mas você pode aprender tudo sobre o Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Elemento usando a propriedade "clear"

A solução rápida e suja (com algumas desvantagens) para quando você está rapidamente juntando algo:

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

Desvantagens

• Não é responsivo e, portanto, pode não fornecer o efeito desejado se os estilos de layout forem alterados com base nas consultas de mídia. Uma solução em CSS puro é mais ideal.
• Ele adiciona a marcação html sem necessariamente adicionar qualquer valor semântico.
• Requer uma definição e solução em linha para cada instância, em vez de uma referência de classe a uma única solução de um "clearfix" no css e referências de classe a ele no html.
• Isso dificulta o trabalho do código para outras pessoas, pois elas podem precisar escrever mais hacks para contorná-lo.
• No futuro, quando você precisar / quiser usar outra solução clearfix, não precisará voltar e remover todas as <br style="clear: both" />tags espalhadas pela marcação.

Que problemas estamos tentando resolver?

Há duas considerações importantes ao flutuar coisas:

1. Contendo carros alegóricos descendentes. Isso significa que o elemento em questão se torna alto o suficiente para envolver todos os descendentes flutuantes. (Eles não ficam do lado de fora.)

   

2. Descendentes isolantes de carros alegóricos externos. Isso significa que os descendentes dentro de um elemento devem poder usar clear: bothe não interagir com flutuadores fora do elemento.

   

Bloquear contextos de formatação

Há apenas uma maneira de fazer as duas coisas. E isso é estabelecer um novo contexto de formatação de bloco . Os elementos que estabelecem um contexto de formatação de bloco são um retângulo isolado no qual os carros alegóricos interagem entre si. Um contexto de formatação de bloco sempre será alto o suficiente para agrupar visualmente seus descendentes flutuantes, e nenhum flutuador fora de um contexto de formatação de bloco poderá interagir com os elementos internos. Esse isolamento bidirecional é exatamente o que você deseja. No IE, esse mesmo conceito é chamado hasLayout , que pode ser definido via zoom: 1.

Existem várias maneiras de estabelecer um bloco de formatação contexto, mas a solução que eu recomendo é display: inline-blockcom width: 100%. (Claro, existem as advertências de costume com o uso width: 100%, por isso, uso box-sizing: border-boxou venda padding, margine borderem um elemento diferente.)

A solução mais robusta

Provavelmente, a aplicação mais comum de carros alegóricos é o layout de duas colunas. (Pode ser estendido para três colunas.)

Primeiro a estrutura de marcação.

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

E agora o 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 */
}

Tente você mesmo

Vá para JS Bin para brincar com o código e ver como esta solução é criada desde o início.

Métodos tradicionais de clearfix considerados prejudiciais

O problema com as soluções tradicionais do clearfix é que eles usam dois conceitos de renderização diferentes para atingir o mesmo objetivo para o IE e todos os outros. No IE, eles usam o hasLayout para estabelecer um novo contexto de formatação de bloco, mas para todos os outros usam caixas geradas ( ) com , o que não estabelece um novo contexto de formatação de bloco. Isso significa que as coisas não se comportarão da mesma maneira em todas as situações. Para obter uma explicação sobre por que isso é ruim, consulte Tudo o que você sabe sobre o Clearfix está errado .:afterclear: both

O novo padrão, usado pelo Inuit.css e Bourbon - dois frameworks CSS / Sass muito usados ​​e bem mantidos:

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

Notas

Lembre-se de que os clearfixes são essencialmente um truque para o que os layouts flexbox agora podem fornecer de uma maneira muito mais inteligente . Os flutuadores CSS foram originalmente projetados para o conteúdo embutido fluir - como imagens em um longo artigo textual - e não para layouts de grade e similares. Se seus navegadores de destino suportam flexbox , vale a pena investigar.

Isso não suporta o IE7. Você não deveria estar apoiando o IE7. Fazer isso continua a expor os usuários a explorações de segurança não corrigidas e dificulta a vida de todos os outros desenvolvedores da Web, pois reduz a pressão sobre os usuários e as organizações para mudarem para navegadores modernos.

Esse clearfix foi anunciado e explicado por Thierry Koblentz em julho de 2012. Ele libera peso desnecessário do micro-clearfix de Nicolas Gallagher em 2011 . No processo, ele libera um pseudo-elemento para seu próprio uso. Isso foi atualizado para usar em display: blockvez de display: table(novamente, crédito para Thierry Koblentz).

Eu recomendo usar o seguinte, retirado 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;  
}

A propriedade overflow pode ser usada para limpar flutuadores sem marcação adicional:

.container { overflow: hidden; }

Isso funciona para todos os navegadores, exceto o IE6, onde tudo que você precisa fazer é ativar o hasLayout (o zoom é o meu método preferido):

.container { zoom: 1; }

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

Encontrei um bug no método oficial CLEARFIX: O DOT não tem tamanho de fonte. E se você definir o height = 0e o primeiro elemento na sua árvore DOM tiver a classe "clearfix", você sempre terá uma margem na parte inferior da página de 12px :)

Você precisa corrigi-lo assim:

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

Agora faz parte do layout YAML ... Basta dar uma olhada - é muito interessante! http://www.yaml.de/en/home.html

Esta é uma solução bastante arrumada:

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

.cf:after {
    clear:both;
}

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

É conhecido por funcionar no Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

A inclusão do seletor: before não é necessária para limpar os carros alegóricos, mas evita que as margens superiores colapsem nos navegadores modernos. Isso garante a consistência visual do IE 6/7 quando o zoom: 1 é aplicado.

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

Clearfix do bootstrap:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

Eu apenas uso: -

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

Funciona melhor e é compatível com o IE8 + :)

Dada a enorme quantidade de respostas que eu não publicaria. No entanto, esse método pode ajudar alguém, como me ajudou.

Fique longe de carros alegóricos sempre que possível

Vale ressaltar, evito carros alegóricos como o Ebola. Há muitas razões e eu não estou sozinho; Leia a resposta do Rikudo sobre o que é uma correção clara e você verá o que quero dizer. Nas suas próprias palavras:...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

Existem outras opções boas (e às vezes melhores) disponíveis além de carros alegóricos. À medida que a tecnologia avança e melhora, o flexbox (e outros métodos) será amplamente adotado e os flutuadores se tornarão apenas uma memória ruim. Talvez um CSS4?

Comportamento incorreto de flutuação e limpações com falha

Primeiro, às vezes, você pode pensar que está protegido contra carros alegóricos até que seu salva-vidas seja perfurado e seu fluxo html comece a afundar:

No codepen http://codepen.io/omarjuvera/pen/jEXBya abaixo, a prática de limpar um float com <div classs="clear"></div>(ou outro elemento) é comum, mas desaprovada e anti-semântica.

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

No entanto , exatamente quando você pensou que seu carro alegórico é digno de uma vela ... bum! À medida que o tamanho da tela se torna cada vez menor, você vê comportamentos estranhos como o gráfico abaixo (Mesmo http://codepen.io/omarjuvera/pen/jEXBya ):

Por que você deveria se importar? Não tenho certeza do número exato, mas cerca de 80% (ou mais) dos dispositivos usados ​​são dispositivos móveis com telas pequenas. Computadores de mesa / laptops não são mais o rei.

Não acaba aí

Este não é o único problema com carros alegóricos. Existem muitos, mas neste exemplo, alguns podem dizer all you have to do is to place your floats in a container. Mas como você pode ver no codepen e gráfico, esse não é o caso. Aparentemente, as coisas pioraram:

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

Quanto ao resultado?

É a mesma coisa!

Pelo menos você sabe, iniciará uma festa CSS, convidando todos os tipos de seletores e propriedades para a festa; fazendo uma bagunça maior do seu CSS do que você começou. Apenas para consertar seu carro alegórico.

CSS Clearfix para o resgate

Esta peça de CSS simples e muito adaptável é uma beleza e um "salvador":

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

É isso aí! Realmente funciona sem quebrar a semântica e eu mencionei que funciona? :

Da mesma amostra ... 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 */
}

Agora não precisamos mais <div classs="clear"></div> <!-- Acts as a wall -->e mantemos a polícia semântica feliz. Este não é o único benefício. Esse clearfix responde a qualquer tamanho de tela sem o uso da @mediaforma mais simples. Em outras palavras, ele manterá seu contêiner de bóia sob controle e evitará inundações. Por fim, fornece suporte para navegadores antigos, tudo em um pequeno golpe de karatê =)

Aqui está o clearfix novamente

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

Eu sempre flutuo as seções principais da minha grade e aplico clear: both;no rodapé. Isso não requer uma div ou classe extra.

honestamente; todas as soluções parecem ser um truque para corrigir um erro de renderização ... estou errado?

Eu achei <br clear="all" />o mais fácil, o mais simples. ver em class="clearfix"todos os lugares não pode despertar a sensibilidade de alguém que se opõe a elementos estranhos de maquiagem, pode? você está apenas pintando o problema em uma tela diferente.

Eu também uso a display: hiddensolução, que é ótima e não requer declarações de classe extra ou marcação html ... mas às vezes você precisa dos elementos para sobrecarregar o contêiner, por exemplo. fitas e faixas bonitas

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

Eu tentei todas essas soluções, uma grande margem será adicionada ao <html>elemento automaticamente quando eu usar o código abaixo:

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

Finalmente, resolvi o problema da margem adicionando font-size: 0;ao CSS acima.

Com o SASS, o clearfix é:

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

e é usado como:

.container {
    @include clearfix;
}

se você deseja o novo clearfix:

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

Com o LESS ( http://lesscss.org/ ), pode-se criar um útil auxiliar de clearfix:

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

E depois use-o com contêineres problemáticos, por exemplo:

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

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

Usar overflow:hidden/ autoe height para ie6 será suficiente se o contêiner flutuante tiver um elemento pai.

Qualquer um dos #test poderia funcionar, pois o HTML indicado abaixo limpa os flutuadores.

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

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

Nos casos em que isso se recusar a trabalhar com o ie6, basta fazer a flutuação do pai para limpar a flutuação.

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

Nunca realmente precisei de outro tipo de limpeza ainda. Talvez seja a maneira como escrevo meu HTML.

Um novo valor de exibição parece para o trabalho em uma linha.

display: flow-root;

Na especificação W3: "O elemento gera uma caixa de contêiner de bloco e expõe seu conteúdo usando o layout de fluxo. Ele sempre estabelece um novo contexto de formatação de bloco para seu conteúdo."

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

※ Como mostrado no link acima, o suporte atualmente é limitado, portanto, o suporte a fallback como abaixo pode ser útil: https://github.com/fliptheweb/postcss-flow-root

Eu flutuaria #contenttambém, dessa maneira as duas colunas contêm flutuadores. Também porque permitirá limpar os elementos internos #contentsem limpar a barra lateral.

A mesma coisa com o wrapper, você precisaria torná-lo um contexto de formatação de bloco para quebrar as duas colunas.

Este artigo menciona alguns gatilhos que você pode usar: bloquear contextos de formatação .

Um clearfix é uma maneira de um elemento limpar automaticamente depois de si mesmo, para que você não precise adicionar marcações adicionais.

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

Normalmente você precisaria fazer o seguinte:

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

Com o clearfix, você só precisa

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

Por que apenas tentar usar o css hack para fazer o que uma linha de HTML faz? E por que não usar html semântico tu put break para retornar à linha?

Para mim, é muito melhor usar:

<br style="clear:both" />

E se você não quer nenhum estilo em seu html, basta usar a classe para a sua pausa e inserir .clear { clear:both; }seu CSS.

Vantagem disso:

• Uso semântico de html para retorno à linha
• Se nenhum CSS carregar, ele estará funcionando
• Não há necessidade de código CSS extra e Hack
• não é necessário simular o br com CSS, ele já existe em HTML

Supondo que você esteja usando esta estrutura HTML:

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

Aqui está o CSS que eu usaria:

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

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

Eu uso esse conjunto o tempo todo e funciona bem para mim, mesmo no IE6.

Ao contrário de outros clearfixes, aqui está um open-ended sem contêineres

Outros clearfixes exigem que o elemento flutuante esteja em um contêiner bem marcado ou precisam de um extra, semanticamente vazio <div>. Por outro lado, a clara separação de conteúdo e marcação requer uma solução estrita de CSS para esse problema.

O simples fato de ser necessário marcar o final de um float, não permite a digitação automática de CSS .

Se esse for o seu objetivo, o flutuador deve ser deixado aberto para que tudo (parágrafos, listas ordenadas e não ordenadas, etc.) o envolvam, até que um "clearfix" seja encontrado. Por exemplo, o clearfix pode ser definido por um novo cabeçalho.

É por isso que eu uso o seguinte clearfix com novos títulos:

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

Esta solução é amplamente utilizada no meu site para resolver o problema: O texto ao lado de uma miniatura flutuante é curto e a margem superior do próximo objeto de limpeza não é respeitada.

Também impede qualquer intervenção manual ao gerar automaticamente PDFs a partir do site. Aqui está um exemplo de página .

Eu sempre uso o micro-clearfix :

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

.cf:after {
    clear: both;
}

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

No Cascade Framework, eu até o aplico por padrão em elementos no nível do bloco. A IMO, aplicando-a por padrão em elementos de nível de bloco, fornece aos elementos de nível de bloco um comportamento mais intuitivo do que seu comportamento tradicional. Também facilitou muito a adição de suporte para navegadores mais antigos no Cascade Framework (que suporta IE6-8 e navegadores modernos).

Você também pode colocar isso no seu CSS:

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

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

E adicione a classe "cb" ao seu div principal:

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

Você não precisará adicionar mais nada ao seu código original ...

Você já tentou isso:

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

Não tive problemas com este método.

Meu método favorito é criar uma classe clearfix no meu documento css / scss como abaixo

.clearfix{
    clear:both
}

E, em seguida, chame-o no meu documento html, como mostrado abaixo

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

É tão simples que o clearfix resolve o problema ao usar as propriedades de flutuação dentro do elemento div. Se usarmos dois elementos div, um como float: left; e outro como float: certo; podemos usar o clearfix para o pai dos dois elementos div. Se nos recusarmos a usar o clearfix, espaços desnecessários serão preenchidos com o conteúdo abaixo e a estrutura do site será interrompida.