Trabalhando com float

O float é uma técnica antiga, sabemos que hoje podemos usar o flexbox que sem dúvidas é muito melhor, porém por questões de cross-browser nem sempre é possível. E como usar o float sem grandes dores de cabeça?

Primeiro o float dispensa o uso do display, alguns sonares até vão identificar como erro.

Existe uma técnica de criar uma div cega para fazer a quebra de linha, como no exemplo abaixo.

.clearfix {
  border: 0;
  display: table;
  width: 100%;
  height: 1px;
  clear: both;
}

<div class="float-left-50">
 ....
</div>
<div class="float-left-50">
 ....
</div>
<div class="clearfix"></div>

 

Eu particularmente prefiro usar essa técnica:

.row{
  display: block;
}

.row:after,
.row:before {
  content: "";
  display: table;
  clear: both;
}

<div class="row">
      <div class="float-left-50">
       ....
      </div>
      <div class="float-left-50">
       ....
      </div>
</div>

 

Fica a dicaaaaaaa!

 


 

Curso online sobre: Tipografia, Font-face e Fallbacks!

Compartilhe...Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn