CSS: Float vs Inline Block - Qual usar em meus layouts?

Olá, Web Developers!

Você sabe quando utilizar float e display: inline-block? Aqui a gente vai ver as características de cada um para te ajudar a escolher qual o melhor a ser usado em determinada ocasião no seu projeto.

Ambos têm uma base parecida: permitir que elementos fiquem na mesma linha. Os seus demais comportamentos são totalmente diferentes e muitos desenvolvedores acabam não sabendo quando devem usar um ou outro.

Float

As pessoas normalmente utilizam o float para desenvolver colunas em seus layouts ou permitir que elementos de bloco ocupem a mesma linha, mas esta propriedade foi criada originalmente para permitir que um texto envolva um elemento.

No exemplo acima, nosso texto está envolvendo a nossa div. Normalmente os elementos ocupam uma linha, e aqui temos três linhas ao lado dele.

Um dos problemas do float é que o elemento pai não vai saber a sua altura, já que o elemento está flutuando.

No Exemplo 1 podemos ver que a div container, com borda verde, apenas interpreta a altura do nosso texto. A altura do nosso elemento flutuante, a div azul, é ignorada.
No Exemplo 2 nós utilizamos outra div com a propriedade clear para poder limpar os efeitos do float, fazendo com que o fluxo dos elementos volte ao normal e o container possa interpretar a altura normalmente.

<div class="container">
  <div class="floating" ></div>
  Exemplo 2
  <p class="clear" ></p>
</div>

Muitas pessoas acham isso feio: ter que colocar um elemento vazio apenas para fazer a altura de um elemento ser interpretada. Isso também tira o sentido da semântica do código.

Muitos frameworks, como o bootstrap, e bibliotecas de grid, como o unsemantic, funcionam assim para poder dar suporte a navegadores mais antigos.

No Exemplo 3 nós utilizamos outro hack: a propriedade overflow: auto no container. Isso faz com qua a gente não precise mais de um elemento apenas para encerrar o comportamento do float, mas só funciona bem se tivermos total controle das margens do container. Do contrário, você verá barras de rolagem.

.container-overflow{
  overflow: auto;
}

No Exemplo 4 temos algo mais complexo, porém mais confiável, muito utilizado em lugares como o HTML5 Boilerplate. Então, problemas com barra de rolagem resolvidos!

.clearfix:before, .clearfix:after { content: "020"; display: block; height: 0; overflow: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

Criamos uma classe .clearfix que cria um pseudo-elemento com o :before e :after. Ele utiliza a ideia do overflow e clear:both, e não veremos nada estranho porque também escondemos os pseudo-elementos com height: 0.

Mas se a ideia das tecnologias é sempre melhorar, por que continuar com essa complexidade toda?

Curso HTML5 e CSS3 - Desenvolvimento web Básico

Conhecer o curso

Inline Block

Quando utilizamos display: inline-block, também estamos fazendo com que um elemento permaneça na mesma linha.

Note a diferença com o primeiro exemplo do float: nossa div está na mesma linha do texto, mas não são criadas novas linhas em volta dela. Tudo bem, o objetivo aqui é manter elementos na mesma linha. Aqui não teremos problemas com a altura do cointainer ou barra de rolagem. (◠◡◠)

Outra vantagem é que como agora ele é um elemento com comportamento de linha, poderemos utilizar as propriedades text-align e vertical-align para modificar sua posição. Masss … Teremos um probleminha quando precisarmos que os elementos estejam encostados (⌣_⌣“)

No exemplo acima criamos um layout que tem três colunas de larguras iguais que precisam preencher uma linha inteira. Note que entre a Div 1 e a Div 2 há um espaço. Se inspecionarmos os elementos veremos que não há margens separando as divs. Por quê esse espaço existe? Por causa dele, a nossa Div 3 foi jogada para a linha de baixo!

Acontece que o inline-block faz o elemento ter comportamentos de um elemento de linha. Os elementos de linha são basicamente textos!

<div class="container" >
  <div class="column">Div 1</div>
  <div class="column">Div 2</div>
  <div class="column">Div 3</div>
</div>

Quando escrevemos um texto, queremos que haja espaços entre as palavras, certo? Então o navegador interpreta os espaços que damos entre as palavras. Para organizar melhor o nosso HTML, nós colocamos uma div em cada linha. Essa quebra de linha no código é interpretado como espaço e acaba interferindo na renderização de elementos inline ou inline-block.

Caso você tenha o costume de minificar o seu código, os espaços serão removidos e você não terá esse problema.

Exemplo do resultado que queremos:

Aqui algumas maneiras de resolver isso com HTML:

<!-- Deixar tudo na mesma linha -->
<!-- Péssimo, pois deixa o código muito bagunçado -->
<div class="container" >
  <div class="column">Div 1</div><div class="column">Div 2</div><div class="column">Div 3</div>
</div>

<!-- Deixar a tag de fechamento junto à tag de abertura do elemento seguinte -->
<!-- Melhora um pouquinho, mas continua estranho -->
<div class="container" >
  <div class="column">Div 1
  </div><div class="column">Div 2
  </div><div class="column">Div 3</div>
</div>

<!-- Criar um comentário entre a quebra de linha -->
<!-- Muita gente prefere esse -->
<div class="container" >
  <div class="column">Div 1</div><!--
  --><div class="column">Div 2</div><!--
  --><div class="column">Div 3</div>
</div>

Aqui algumas maneiras de resolver isso com CSS:

/* Declarar uma margem negativa */
.column{
   margin-right: -4px;
}

/* Declarar font-size do container como 0 fará
*  o espaço ser 0 também, mas teremos que declarar
*  novamente o tamanho da fonte da nossa coluna.
*  Esse hack pode ter problemas em algumas versões
*  do Android e pode nos atrapalhar se nossos elementos
*  estiverem usando unidades como "em"
*/
.container{
   font-size: 0;
}
.column{
   font-size: 16px;
}

Concluindo

Float: Prefira usar quando quiser que um texto ou outros elementos contornem um determinado elemento. Essa é a real função dele.

Inline Block: Vimos aqui que o único problema do inline-block ocorre quando precisamos que os elementos fiquem encostados. Caso esse não seja o seu caso, o inline-block resolverá seus problemas sem a necessidade de algum hack.

Caso você não precise dar suporte total a navegadores mais antigos, então é mais recomendado que você monte seus layouts com as propriedades do flex-box.

Alguma ideia, dúvida ou sugestão? Compartilhe com a gente aí nos comentários!