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


127

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?


@Moak Essa questão em particular é sobre inline, não inline-block. Mas o primeiro na relacionado é bom: stackoverflow.com/a/11823622/918414
ThinkingStiff


2
exemplo de link está morto
information_interchange

Respostas:


156

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


4
"clearfix" é apenas um nome; a "correção" indica a fixação de expectativas incorretas e / ou implementação incorreta do navegador. Eu (felizmente) concordo que existem alternativas para flutuar / limpar, mas não há nada inerentemente quebrado ou corrigido sobre isso.
quer

10
@Alex - Existe uma maneira não-hacky e compatível com vários navegadores para remover o espaço em branco entre os elementos de bloco embutido que estão em linhas separadas? Gostaria de poder parar de usar carros alegóricos, mas os melhores links que pude encontrar sobre esse problema ( aqui e aqui ) são insatisfatórios. Você mencionou a white-spacepropriedade - você poderia explicar isso?
Antinome

3
@ Alex - obrigado, isso é muito legal, mas ainda acho a abordagem float-with-modern-clearfix um pouco mais sustentável, porque não quebrará se algum dia eu customizar letter-spacingem outro lugar no meu CSS.
Antinome

1
por que o bootstrap ainda está usando float para seu sistema de grade? Não são esses o layout?
AzDesign

2
Lembre-se de que o bloco embutido adiciona espaço em branco ao redor dos elementos. Se você o estiver usando para uma grade ou não quiser esse espaço em branco, será necessário adicionar hacks de estilo / HTML extras para explicar isso. Veja: css-tricks.com/fighting-the-space-between-inline-block-elements/...
kretzm

23

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:


existe alguma solução possível para o espaço não em branco entre, talvez div+(whitespace) {display:none}ou algo assim?
NoBugs

1
Veja o terceiro parágrafo após a sua primeira frase ... ver Particularmente a questão ligada
user56reinstatemonica8

@NoBugs simplesmente aplica o tamanho da fonte: 0; para o elemento que contém, apenas observe se você não possui tamanhos de fonte específicos definidos nos elementos dentro dos blocos embutidos !!
Jai

@Jai Exatamente, e como o estilo / exibição deve ser desmembrado do processo de criação do html / modelo, isso é uma prática ruim. (E se você usar um serviço que você deu <div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ?)
NoBugs

4

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


6
Sim, é porque você deve evitar o uso de espaços entre elementos, porque os blocos embutidos levam em conta os espaços da mesma maneira que os elementos embutidos. Mantenha as tags de bloco embutido firmemente entre si e sem problemas com pixels.
Ben Sinclair

Além disso, este pode ser uma diferença navegador com estofamento default / margem em elementos .. Bem, pelo menos no passado eu sempre fiz * {padding:0px; margin:0px; }, pois isso ajuda a equilibrar a minha codificação
irritado 84

É por isso que o Bootstrap (talvez outros) o usa em vez do bloco embutido, imagino?
NoBugs

1

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


1

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.