Vantagens de usar display: inline-block vs float: left in CSS

Normalmente, quando queremos ter vários DIVs em sequência, usaríamos float: left, mas agora descobri o truque dedisplay:inline-block

Exemplo de link aqui . Parece-me que display:inline-blocké uma maneira melhor de fazer align DIVsuma fila, mas existem algumas desvantagens? Por que essa abordagem é menos popular que o floattruque?

Em 3 palavras: inline-blocké melhor.

Bloco embutido

A única desvantagem da display: inline-blockabordagem é que, no IE7 e abaixo, um elemento só pode ser exibido inline-blockse já estiver inlinepor padrão. O que isso significa é que, em vez de usar um <div>elemento, você deve usá-lo <span>. Não é realmente uma grande desvantagem, porque semanticamente a <div>é para dividir a página enquanto a <span>é apenas para cobrir um espaço de uma página, então não há uma grande diferença semântica. A grande vantagem de display:inline-blocké que quando outros desenvolvedores estão mantendo o seu código em um momento posterior, é muito mais óbvio o que display:inline-blocke text-align:right está tentando realizar do que uma float:leftou float:rightdeclaração. Meu benefício favorito da inline-blockabordagem é que é fácil de usar vertical-align: middle, line-heightetext-align: centercentralizar perfeitamente os elementos, de maneira intuitiva. Encontrei um ótimo post sobre como implementar o bloqueio em linha entre navegadores, no blog da Mozilla . Aqui está a compatibilidade do navegador .

Flutuador

O motivo pelo qual o floatmétodo não é adequado para o layout da sua página é porque a floatpropriedade CSS foi originalmente projetada apenas para contornar o texto em torno de uma imagem (estilo de revista) e, por design, não é mais adequada para fins gerais de layout da página. Ao alterar os elementos flutuantes posteriormente, às vezes você terá problemas de posicionamento porque eles não estão no fluxo da página . Outra desvantagem é que geralmente requer uma correção clara, caso contrário, pode quebrar aspectos da página. O clearfix requer a adição de um elemento após os elementos flutuantes para impedir que seus pais entrem em colapso ao redor deles, o que cruza a linha semântica entre separar estilo do conteúdo e, portanto, é um antipadrão no desenvolvimento da Web .

Quaisquer problemas de espaço em branco mencionados no link acima podem ser facilmente corrigidos com a white-spacepropriedade CSS.

Editar:

O SitePoint é uma fonte muito credível para consultoria em design da web e eles parecem ter a mesma opinião que eu:

Se você não conhece os layouts de CSS, seria perdoado por pensar que o uso de CSS flutua de maneiras imaginativas é o ponto alto da habilidade. Se você consumiu o máximo de tutoriais de layout CSS, pode supor que dominar carros alegóricos é um rito de passagem. Você ficará deslumbrado com a ingenuidade, impressionado com a complexidade e terá uma sensação de conquista quando finalmente entender como os carros alegóricos funcionam.

Não se deixe enganar. Você está sendo lavado o cérebro.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Atualização de 2015 - Flexbox é uma boa alternativa para navegadores modernos :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Mais informações

21 de dezembro de 2016 Atualização

O Bootstrap 4 está removendo o suporte para o IE9 e, assim, está se livrando das flutuações das linhas e indo para o Flexbox completo.

Solicitação pull # 21389

Embora eu concorde que, em geral, inline-blocké melhor, há uma coisa extra a ser levada em consideração se você estiver usando larguras percentuais para criar uma grade responsiva (ou se desejar larguras perfeitas em pixels):

Se você estiver usando inline-blockpara grades que totalizem 100% ou quase 100% de largura, verifique se a sua marcação HTML não contém espaços em branco entre as colunas .

Com os carros alegóricos, isso não é algo com que você precisa se preocupar - as colunas flutuam sobre qualquer espaço em branco ou outro conteúdo entre as colunas. As respostas desta pergunta têm algumas boas dicas sobre como remover o espaço em branco HTML sem tornar seu código feio .

Se, por algum motivo, você não puder controlar a marcação HTML (por exemplo, um CMS restritivo), tente os truques descritos aqui ou talvez precise comprometer e usar flutuadores em vez de bloco embutido. Existem também truques feios de CSS que só devem ser usados ​​em circunstâncias extremas, como font-size:0;no contêiner da coluna e reaplicar o tamanho da fonte em cada coluna .

Por exemplo:

• Aqui está uma grade de 3 colunas com 33,3% de largurafloat: left . "Funciona" (mas para o invólucro que precisa ser limpo).
• Aqui está exatamente a mesma grade, cominline-block . O espaço em branco entre os blocos cria um espaço de largura fixa que empurra a largura total além de 100%, interrompendo o layout e fazendo com que a última coluna caia em uma linha.
• Aqui está a mesma grade, com inline-blocke sem espaço em branco entre as colunas no HTML . "Funciona" novamente - mas o HTML é mais feio e seu CMS pode forçar algum tipo de prettificação ou recuo na saída HTML, dificultando a realização na realidade.

Se você deseja alinhar o divpixel com precisão, use float. inline-blockparece sempre exigir que você corte alguns pixels (pelo menos no IE)

Você pode encontrar respostas em profundidade aqui .

Mas, em geral, floatvocê precisa estar ciente e cuidar dos elementos circundantes einline-block uma maneira simples de alinhar elementos.

obrigado

Há uma característica sobre o bloco embutido que pode não ser direta. Ou seja, o valor padrão para o alinhamento vertical no CSS é a linha de base. Isso pode causar algum comportamento inesperado de alinhamento. Veja este artigo.

http://www.brunildo.org/test/inline-block.html

Em vez disso, quando você faz um float: left, os divs são independentes um do outro e você pode alinhá-los usando a margem facilmente.