7

Gostaria de saber as vantagens e desvantagens de usar as propriedades float e display com o valor inline-block. Sei que ambos funcionam para alinhar elementos, porém procuro saber os prós e contras de cada um.

  • O inline-block pode substituir o float?
  • Qual é o mais suportado pelos browsers atualmente?

2 Respostas 2

5

Float serve para vc "flutuar" elementos um ao lado do outro. A div é um elemento do tipo bloco e funciona como um box model, ou seja ela ocupa 100% da largura da tela e aceita valores de margin, padding e border. Logo, pela div ocupar 100% da largura da tela ela não deixa que outras divs ficarem ao seu lado, para "corrigir" isso usava-se o float

Porém, usar float tem uma série de problemas, o float faz com que um elemento pai perca a referência do box model do filho que tem float, para prevenir esse comportamente usa-se a técnica do clearfix como vc pode ler mais aqui: O Que esse código CSS Faz ?

Com Float / Sem ClearFix inserir a descrição da imagem aqui Com Float / Com CleatFix inserir a descrição da imagem aqui

Ai vc vai pode pensar: "Então eu vou usar display:inline-block!" Nesse caso vc vai cair em outro problemas... Que é o whitespace-only text node. Esse nome estranho é o espaço que aparece por default em elementos que estão inline, pois quando assume o escopo de inline ou inline-block o elemento herda algumas características de texto, ou seja, é como que se cada elemento se comportasse como uma palavra em um texto, então por padrão entre uma palavra e outra temos um "espaço", que é representado pelo whitespace-only text node como vc pode se informar nessa pergunta: Como remover do DOM os "whitespace-only text node" que aparecem no HTML

Com display:inline-block e os text-nodes espaçando os elementos inserir a descrição da imagem aqui


Vamos ver alguns exemplos para entender melhor

Repare nesse exemplo de divs com display:inline-block dentro de um container, perceba que tem uma maldita "margem" branca entre um bloco e outro:

.container {
  border: 1px solid black;
}

.container div {
  display: inline-block;
  width: 50px;
  padding: 50px;
  background-color: #f00;
}
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Agora o mesmo exemplo usando float, repare que o pai que tem a borda preta agora não reconhece mais o box model dos filho com float

.container {
  border: 1px solid black;
}
.container div {
  float: left;
  width: 50px;
  padding: 50px;
  background-color: #f00;
}
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Agora vamos ver uma opção com display:flex, repare que não temos nenhum efeito colateral nas divs ou no container :), fica tudo alinhado, sem espaços em branco e o pai ainda reconhece o tamanho do filho.

.container {
  border: 1px solid black;
  display: flex;
}
.container div {
  width: 50px;
  padding: 50px;
  background-color: #f00;
}
  
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>


Agora para vc entender melhor o display:inline-block. Com ele o elemento passa a aceitar valores de box model como margin e border. Repare no código abaixo que mesmo eu colocando margem no span ele não "empurra" o que está acima ou abaixo, já o span com inline-block empurra! Como vc pode ver no código abaixo, e nessa pergunta: Por que a Borda só afasta o elemento Horizontalmente e não Verticalmente?

<span>Lorem ipsum dolor sit amet.</span><br>
<span>Lorem ipsum <span style="margin:15px; border: 10px solid red;">display inline default</span> sit amet.</span><br>
<span>Lorem ipsum dolor sit amet.</span>

<br><br>

<span>Lorem ipsum dolor sit amet.</span><br>
<span>Lorem ipsum <span style="display:inline-block; margin:15px; border: 10px solid red;">display inline block</span> sit amet.</span><br>
<span>Lorem ipsum dolor sit amet.</span>


Suporte dos Browser

Sobre o Float e o Display:inline-block ambos são amplamente suportados, o IE8 por exemplo já aceitava as duas propriedades como vc pode consultar aqui: https://caniuse.com/

Já o Flex é mais moderno e só funciona do IE10+ https://caniuse.com/#search=flex

4
  • 1
    Excelente explicação meu caro. Commented 25/09/2018 às 17:49
  • @fernandosavio valeu jovem! Tentei ser o mais didático possível :)
    – hugocsl
    Commented 25/09/2018 às 17:51
  • Trabalho com isso há anos e tem certas coisas que a gente nem sabe porque funciona, só sabe que funciona. É bom parar pra ver boas explicações e exemplos práticos. Commented 25/09/2018 às 17:53
  • 1
    @fernandosavio "Não sei, só sei que foi assim..." haha, isso é muito normal com CSS, mas depois que se entende alguns princípios é como o Neo entrando na Matrix! Boa parte do que escrevo aqui aprendi lendo outras respostas e perguntando, inclusive duas das minhas perguntas eu usei para responder essa rss. Sempre estamos aprendendo algo novo, essa é a graça!
    – hugocsl
    Commented 25/09/2018 às 17:55
1

Bom, vamos lá! A propriedade float de acordo com sua documentação é usado pra você alinhar imagens ao lado de um texto, tanto na direita ou esquerda, como jornal, sabe?

Já o display: inline-block é pra você deixar um elemento pra trabalhar tanto como um elemento de bloco ou linha.

Ambos são aceitos pelos navegadores.

Muitas pessoas acham que essas propriedades são usadas para criar layout, mas isso é totalmente ultrapassado nos dias atuais, antigamente usava-se porque não tinha uma maneira no CSS para isso, daí criavam layout usando float e o clearfix seria uma gambiarra pra organizar a quebra, saca?

Caso sua dúvida seja pra criar layout, lembre-se: essas duas tags não são para isso, estude Flexbox e GRID.

Espero ter ajudado :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .