Que métodos de ‘clearfix’ eu posso usar?

StackOverflow https://stackoverflow.com/questions/211383

  •  03-07-2019
  •  | 
  •  

Pergunta

Eu tenho o velho problema de um div envolvendo um layout de duas colunas. Minha barra lateral é lançada, então meu recipiente div não envolva o conteúdo e barra lateral. 

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

Parece haver vários métodos de corrigir o bug clara no Firefox:

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

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

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

Foi útil?

Solução

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

O clearfix tem aplicações úteis, mas também tem sido usado como um hack. Antes de utilizar um clearfix talvez estas soluções css modernos podem ser úteis:

clearfix Solutions modernos

Container com overflow: auto;

A maneira mais simples para limpar elementos flutuantes está usando o overflow: auto estilo no 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, usando certas combinações de margem e preenchimento no elemento externo pode causar rolagem apareça, mas isto pode ser resolvido colocando a margem e estofamento em outro contendo elemento pai.

Usando ‘overflow: hidden’. É também uma solução clearfix, mas não terá de rolagem, no entanto usando hidden irá cortar qualquer conteúdo fora posicionado do elemento que contém

Nota:. O elemento flutuado é uma tag img neste exemplo, mas poderia ser qualquer elemento html

Clearfix Reloaded

Thierry Koblentz em CSSMojo escreveu: A mais recente clearfix Reloaded . Ele observou que, largando suporte para oldIE, a solução pode ser simplificada para uma declaração css. Além disso, usando display: block (em vez de display: table) permite margens de colapso corretamente quando elementos com clearfix são irmãos. 

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

Esta é a versão mais moderna do clearfix.

?

?

mais velhos clearfix Solutions

A seguir soluções não são necessárias para navegadores modernos, mas pode ser útil para a segmentação navegadores mais antigos.

Note que essas soluções dependem de bugs do navegador e, portanto, só deve ser usado se nenhuma das soluções acima funcionar para você.

Eles estão listados mais ou menos em ordem cronológica.

"Beat That clearfix", um clearfix para navegadores modernos

Thierry Koblentz' da CSS Mojo salientou que quando o direcionamento navegadores modernos, agora podemos cair os zoom e ::before propriedade / valores e simplesmente uso: 

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

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

Thierry também oferece: " Uma palavra de cautela : Se você começar um novo projeto a partir do zero, vá para ele, mas não trocar esta técnica com o que você tem agora, porque mesmo que você não suportam oldIE, suas regras existentes evitar colapso margens. "

Micro Clearfix

A solução mais recente e globalmente adotadas clearfix, o Micro Clearfix por Nicolas Gallagher .

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

Overflow Propriedade

Este método básico é o preferido para o caso usual, quando o conteúdo posicionado não irá mostrar no exterior dos limites do recipiente.

http://www.quirksmode.org/css/clearing.html -. explica como resolver problemas comuns relacionados a essa técnica, ou seja, a criação width: 100% no recipiente 

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

Ao invés de usar a propriedade display ao conjunto "hasLayout" para o IE, outras propriedades podem ser usadas para provocando "hasLayout" para um elemento . 

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

Outra forma de carros alegóricos clara usando a propriedade overflow é usar a sublinhado corte . IE vai aplicar os valores prefixados com o sublinhado, outros navegadores não vai. Os gatilhos de propriedade zoom hasLayout em IE: 

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

Enquanto isso funciona ... não é ideal para hacks de uso.

PIE: Easy Método Clearing

Este método mais antigo "Easy Clearing" tem a vantagem de permitir elementos posicionados para pendurar fora dos limites do recipiente, à custa de CSS mais complicado.

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

elemento usando a propriedade "clara"

A solução rápida e suja (com algumas desvantagens) para quando você está batendo rapidamente alguma coisa juntos: 

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

Desvantagens

  • Não é sensível e, portanto, não pode fornecer o efeito desejado se estilos de layout mudanças com base em consultas de mídia. Uma solução em CSS puro é mais ideal.
  • Acrescenta html marcação sem necessariamente adicionar qualquer valor semântico.
  • Ela exige uma definição em linha e solução para cada caso, em vez de uma referência de classe para uma única solução de um “clearfix” no CSS e de classe referências a ele no html.
  • Faz o código difícil de trabalhar para os outros como eles podem ter que escrever mais hacks para trabalhar em torno dele.
  • No futuro, quando você precisa / quer usar outra solução clearfix, você não tem que voltar e remover todos os tag <br style="clear: both" /> cheio em torno da marcação.

Outras dicas

Quais os problemas que estamos tentando resolver?

Há duas considerações importantes quando flutuante coisas:

  1. Contendo carros alegóricos descendentes. Isto significa que o elemento em questão faz-se bastante alto para envolver todos os descendentes flutuantes. (Eles não pendurar fora.)

    Floating pendurado conteúdo fora do seu recipiente

  2. isolamento descendentes de carros alegóricos fora. Isto significa que os descendentes dentro de um elemento deve ser capaz de usar clear: both e tê-lo não interagem com flutuadores fora do elemento.

    <code>zoom: 1</code> interagindo com um flutuador em outros lugares no DOM

Bloco de formatação contextos

Há apenas uma maneira de fazer ambos. E que é o de estabelecer um novo formatação contexto . Elementos que estabelecem um bloco de formatação contexto são um retângulo isolado no qual flutua interagem uns com os outros. Um contexto de formatação bloco será sempre suficientemente alto para embrulhar visualmente seus descendentes flutuantes, e não flutua fora de um bloco de formatação contexto podem interagir com elementos dentro. Este isolamento de duas vias é exatamente o que você quer. No IE, este mesmo conceito é chamado hasLayout , que pode ser configurado via display: inline-block.

Existem várias maneiras de estabelecer um bloco de formatação contexto, mas a solução que eu recomendo é width: 100% com width: 100%. (Claro, existem os advertências habituais com o uso box-sizing: border-box, por isso uso padding ou colocar margin, border, e :after em 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 é construído a partir do zero.

métodos tradicionais clearfix consideradas prejudiciais

O problema com o tradicional clearfix soluções é que eles usam dois conceitos de processamento diferentes para atingir o mesmo objetivo para o IE e todos os outros. No IE eles usam hasLayout para estabelecer um novo bloco formatação contexto, mas para todos eles usam caixas gerados (clear: both) com clear: both, que não estabelece uma nova formatação bloco de contexto. Isso significa que as coisas não se comportam da mesma em todas as situações. Para uma explicação de por que isso é ruim, veja tudo o que sabe sobre Clearfix é errada.

O novo padrão, como o usado por Inuit.css e Bourbon - dois CSS / frameworks Sass muito utilizadas e bem conservados: 

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

Notas

Tenha em mente que clearfixes são essencialmente um hack para o que layouts flexbox agora pode fornecer em um muito maneira mais inteligente. carros alegóricos CSS foram originalmente concebidos para o conteúdo inline para fluir ao redor - como imagens em um artigo textuais longo - e não para layouts de grade e afins. Se o seu navegadores de destino apoio flexbox , vale a pena olhar em.

Este não suporta IE7. Você não deve apoiar IE7. Se o fizer, continua a expor os usuários para falhas de segurança não corrigidos e torna a vida mais difícil para todos os outros desenvolvedores web, uma vez que reduz a pressão sobre os usuários e organizações para mudar para navegadores modernos.

Esta clearfix foi anunciada e explicada por Thierry Koblentz em julho de 2012. Ele acumula gordura desnecessária de 2011 micro-clearfix Nicolas de Gallagher . No processo, ele libera um pseudo-elemento para o seu próprio uso. Esta foi atualizado para display: block uso ao invés de display: table (mais uma vez, o crédito para Thierry Koblentz).

Eu recomendo usar o seguinte, que é tomada a partir 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 usado para carros alegóricos claras com nenhum adicional mark-up: 

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

Eu encontrei um bug no oficial clearfix-Método: Será que o DOT não tem um font-size. E se você definir o height = 0 e o primeiro elemento em seu DOM-Tree tem a classe "clearfix" você passará pelas possuem uma margem na parte inferior da página de 12px:)

Você tem que consertá-lo como este: 

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

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

Esta é uma solução bastante arrumado: 

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

.cf:after {
    clear:both;
}

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

É conhecida a trabalhar no Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6 +

Incluindo o: antes selector não é necessário limpar os carros alegóricos, mas impede top-margens de entrar em colapso em navegadores modernos. este garante que haja consistência visual com IE 6/7 quando aumentar: 1 é aplicada.

A partir http://nicolasgallagher.com/micro-clearfix-hack/

Clearfix de inicialização: 

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

Eu só uso: - 

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

funciona melhor e é compatível com IE8 +:)

Dada a enorme quantidade de respostas que eu não ia post. No entanto, este método pode ajudar alguém, como fez me ajudar.

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

Vale a pena mencionar, evito flutua como Ebola. Há muitas razões e eu não estou sozinho; Leia Rikudo resposta sobre o que é um clearfix e você verá o que quero dizer. Em 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 boas (e às vezes melhor) opções lá fora, que não flutua. Com o avanço da tecnologia e melhora, flexbox (e outros métodos) vão a ser amplamente adotado e carros alegóricos vai se tornar apenas uma lembrança ruim. Talvez um CSS4?

Float mau comportamento e não limpa

Primeiro, às vezes, você pode pensar que você está seguro de carros alegóricos até o seu salva-vidas é perfurada e suas início do fluxo de html a afundar:

No codepen http://codepen.io/omarjuvera/pen/jEXBya abaixo , a prática de limpar uma bóia com <div classs="clear"></div> (ou outro elemento) é comum, mas desaprovam 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 , apenas quando você pensou que seu float é de vela digno ... boom! À medida que o tamanho da tela torna-se menor e menor você vê comportamentos estranhos em como o gráfico abaixo (Same http: // codepen .io / omarjuvera / caneta / jEXBya ):

float amostra bug 1

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

Ele não termina aí

Este não é o único problema com carros alegóricos. Há 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 na codepen e gráfico, que não é o caso. Ele aparentemente fez coisas piores:

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

Como para o resultado?

É o *** mesmos! float amostra bug 2

Pelo menos você sabe, você vai começar uma festa CSS, convidando todos os tipos de seletores e propriedades para a festa; fazendo uma grande confusão de seu CSS do que o que você começou com. Só para corrigir o seu float.

CSS Clearfix para o resgate

Esta simples e peça muito adaptável de CSS é 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 semântica e eu mencionei funciona :?

A partir 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 já não precisamos <div classs="clear"></div> <!-- Acts as a wall --> e manter o feliz polícia semântica. Este não é o único benefício. Este clearfix é sensível a qualquer tamanho de tela sem o uso de @media na forma mais simples a sua. Em outras palavras, ele irá manter o seu recipiente flutuador sob controle e prevenção de inundações. Por último, fornece suporte para navegadores antigos tudo em um pequeno golpe de caratê =)

Aqui está o clearfix novamente 

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

Eu sempre flutuar as principais seções da minha grade e aplicar clear: both; ao rodapé. que isso não requer uma div extra ou classe.

honestamente; todas as soluções parecem ser um hack para corrigir um bug de renderização ... Estou errado?

eu encontrei <br clear="all" /> ser o mais fácil, mais simples. vendo class="clearfix" em todos os lugares não pode acariciar as sensibilidades de alguém que objetos aos elementos markeup estranhos, pode? você está apenas pintar o problema em uma tela diferente.

Eu também uso a solução display: hidden, que é grande e não requer declarações de classe extras ou html marcação ... mas às vezes você precisa dos elementos a transbordar o recipiente, por exemplo. fitas bonitas e faixas 

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

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

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

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

Com SASS, o clearfix é: 

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

e é usado como: 

.container {
    @include clearfix;
}

Se você deseja que o novo clearfix: 

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

Com menos ( http://lesscss.org/ ), pode-se criar um ajudante clearfix útil: 

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

E, em seguida, usá-lo com recipientes problemáticos, por exemplo: 

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

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

Usando overflow:hidden / auto e altura para IE6 será suficiente se o recipiente flutuante tem um elemento pai.

Qualquer um dos #test poderia funcionar, para o HTML indicado abaixo para carros alegóricos claras. 

#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 este se recusa a trabalhar com o IE6, apenas flutuar pai para float incolor. 

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

Nunca realmente necessário qualquer outro tipo de compensação ainda. Talvez seja a maneira que eu escrever o meu HTML.

Eu flutuar #content também, dessa forma ambas as colunas contêm carros alegóricos. Também porque lhe permitirá elementos claros dentro #content sem limpar a barra lateral.

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

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

A clearfix é uma forma de um elemento para limpar automaticamente após si, de modo que você não precisa adicionar marcação adicional. 

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

Normalmente, você precisa fazer algo a seguinte: 

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

Com clearfix, você só precisa 

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

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

display: flow-root;

A partir da especificação w3: ". O elemento gera uma caixa recipiente bloco, e estabelece o seu conteúdo usando layout de fluxo Sempre estabelece um novo bloco de formatação de contexto para o seu conteúdo"

Informações: https://www.w3.org/TR / css-display-3 / # valdef-visor de fluxo-raiz https://www.chromestatus.com/feature/5769454877147136

? Como mostrado no link acima, o apoio está limitado por isso apoio fallback como abaixo pode ser útil: https://github.com/fliptheweb/postcss-flow-root

Por que apenas tentando usar css hack para fazer o 1 linha de HTML fazer o trabalho. E por que não usar html semântica tu colocar pausa para voltar à linha?

Fo me é realmente melhor usar: 

<br style="clear:both" />

E se você não quer qualquer estilo em seu html você só tem que usar a classe para a sua pausa e colocar .clear { clear:both; } no seu CSS.

A vantagem deste:

  • uso Semântica de html para o retorno à linha
  • Se nenhuma carga CSS será trabalhar
  • Não há necessidade de código e CSS extra de corte
  • não há necessidade de simular a BR com CSS, ele já existir em HTML

Assumindo que você está usando essa 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 este conjunto o tempo todo e ele funciona muito bem para mim, mesmo no IE6.

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

Na Cascade Framework Eu até aplicá-lo por padrão em nível de bloco elementos. IMO, aplicá-lo por padrão em elementos nível de bloco dá bloco elementos de nível comportamento mais intuitivo do que o seu comportamento traditonal. Ele também tornou muito mais fácil para mim para adicionar suporte para navegadores mais antigos para Cascade Framework (que suporta IE6-8, bem como navegadores modernos).

Ao contrário de outros clearfixes, aqui é uma uma aberto sem recipientes

Outros clearfixes quer impor ao elemento flutuado para estar em um recipiente bem marcado fora ou precisa de um extra, semanticamente <div> vazio. Por outro lado, a separação clara do conteúdo e marcação requer uma solução CSS estrita para este problema.

O simples fato de que se precisa para marcar o fim de um flutuador, não permite typesetting CSS autônoma .

Se o último for o seu objetivo, o flutuador deve ser deixada em aberto para qualquer coisa (parágrafos, listas ordenadas e não ordenadas etc.) para embrulhar em torno dele, até que um "clearfix" é encontrado. Por exemplo, o clearfix pode ser definido por um novo título.

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

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

Esta solução é usado extensivamente sobre meu site para resolver o problema: O texto ao lado de uma miniatura flutuou é curta e na parte superior margem do próximo objeto de compensação não é respeitada.

Ele também impede qualquer intervenção manual quando gerando automaticamente PDFs a partir do site . Aqui está um exemplo página .

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 classe "cb" à sua div pai: 

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

Você não precisará adicionar qualquer outra coisa ao seu código original ... 

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

Você já tentou isso: 

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

Eu não tive nenhum problema 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, chamá-lo 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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top