Em 3 palavras: inline-block
é melhor.
Bloco embutido
A única desvantagem da display: inline-block
abordagem é que, no IE7 e abaixo, um elemento só pode ser exibido inline-block
se já estiver inline
por 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-block
e text-align:right
está tentando realizar do que uma float:left
ou float:right
declaração. Meu benefício favorito da inline-block
abordagem é que é fácil de usar vertical-align: middle
, line-height
etext-align: center
centralizar 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 float
método não é adequado para o layout da sua página é porque a float
propriedade 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-space
propriedade 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
inline
, nãoinline-block
. Mas o primeiro na relacionado é bom: stackoverflow.com/a/11823622/918414