flutuar: esquerda; vs exibição: em linha; vs display: bloco embutido; vs display: célula da tabela;

281

Minhas perguntas)

  1. Algum desses métodos é preferido por um web designer profissional?

  2. Algum desses métodos é preferido por um navegador da web ao desenhar o site?

  3. Isso tudo é apenas preferência pessoal?

  4. Faltam outras técnicas?

Nota: As perguntas acima são referentes ao design de um layout de várias colunas


flutuar: esquerda;

http://jsfiddle.net/CDe6a/

float: imagem esquerda

Esse é o método que eu sempre uso ao criar layouts de coluna e parece funcionar muito bem. O pai ou a mãe se desmoronam, então você só precisa se lembrar disso clear:both;depois. Outro golpe que acabei de encontrar foi a incapacidade de alinhar o texto verticalmente.

display: embutido;

Isso parece corrigir o problema do pai em colapso, mas adiciona espaço em branco.

http://jsfiddle.net/CDe6a/1/

display: imagem embutida

Remover espaço em branco do html parece ser a solução mais fácil para esse problema, mas não é desejado se você for realmente exigente com o html.

http://jsfiddle.net/CDe6a/2/

nenhuma imagem de espaço em branco html

display: bloco embutido;

Parece se comportar exatamente como display:inline;.

http://jsfiddle.net/CDe6a/3/

display: imagem de bloco embutido

display: célula de tabela;

http://jsfiddle.net/CDe6a/4/

display: imagem da célula da tabela

Funciona perfeito.

Meus pensamentos:

Tenho certeza de que estou perdendo uma tonelada de coisas, como certas exceções que quebram o layout, mas display:table-cell;parece funcionar melhor e acho que vou começar a substituir, float:left;pois sempre pareço atrapalhar clear:both;. Eu li muitos artigos e blogs sobre isso na web, mas nenhum deles me fornece uma resposta definitiva sobre o que devo usar ao criar meu site.

EGHDK
fonte
4
Veja o que os rapazes no html5boilerplate e Twitter Bootstrap uso e ficar com ela
ROBERT NIESTROJ
1
Há um ótimo artigo sobre a luta contra o espaço em css-tricks: css-tricks.com/fighting-the-space-between-inline-block-elements
Lea Rosema
Tentei usar a display: inlinepropriedade e descobri que ela não cuida do preenchimento dos elementos filho corretamente. Mas se eu usar, display: inline-blockisso será resolvido automaticamente. Por favor, consulte o link - codepen.io/prashdeep/pen/rVOyvd Por favor, deixe-me saber suas entradas no mesmo
zilcuanu

Respostas:

200

Das opções que você perguntou sobre:

  • float:left;
    Não gosto de carros alegóricos devido à necessidade de ter marcações adicionais para limpá-los. Para mim, todo o floatconceito foi mal projetado nas especificações do CSS. No entanto, nada que possamos fazer sobre isso agora. Mas o importante é que funciona e funciona em todos os navegadores (até no IE6 / 7), portanto, use-o se quiser.

A marcação adicional para limpeza pode não ser necessária se você usar o :afterseletor para limpar os carros alegóricos, mas essa não é uma opção se você deseja oferecer suporte ao IE6 ou IE7.

  • display:inline;
    Isso não deve ser usado para o layout, com exceção do IE6 / 7, onde display:inline; zoom:1há um hack para o suporte quebrado inline-block.

  • display:inline-block;
    Esta é a minha opção favorita. Funciona bem e consistentemente em todos os navegadores, com uma ressalva para o IE6 / 7, que o suporta para alguns elementos. Mas veja acima a solução hacky para solucionar isso.

A outra grande ressalva inline-blocké que, devido ao aspecto embutido, os espaços em branco entre os elementos são tratados da mesma forma que os espaços em branco entre as palavras do texto, para que você possa ver as diferenças entre os elementos. Existem soluções alternativas para isso, mas nenhuma delas é ideal. (o melhor é simplesmente não ter espaços entre os elementos)

  • display:table-cell;
    Outro onde você terá problemas com a compatibilidade do navegador. IEs mais antigos não funcionarão com isso. Mas, mesmo para outros navegadores, vale a pena notar que ele table-cellfoi projetado para ser usado no contexto de estar dentro de elementos denominados como tablee table-row; o uso table-cellisolado não é a maneira pretendida de fazer isso; portanto, você pode experimentar diferentes navegadores tratando-o de maneira diferente.

Outras técnicas que você pode ter perdido? Sim.

  • Como você diz que isso é para um layout de várias colunas, há um recurso de Colunas CSS que você pode querer conhecer. No entanto, não é o recurso mais suportado (não suportado pelo IE, nem no IE9, e um prefixo de fornecedor exigido por todos os outros navegadores); portanto, você pode não querer usá-lo. Mas é outra opção, e você perguntou.

  • Há também o recurso CSS FlexBox, cujo objetivo é permitir que o texto flua de uma caixa para outra. É um recurso interessante que permitirá alguns layouts complexos, mas isso ainda está em desenvolvimento - consulte http://html5please.com/#flexbox

Espero que ajude.

Spudley
fonte
2
você não precisa de marcação adicional para limpar carros alegóricos, veja minha resposta sobre isso.
Lie Ryan
3
Resposta mais robusta = resposta.
EGHDK 10/08/12
2
Eu sempre uso inline-blockporque é feito exatamente para esses casos.
Rápli András 27/07/2013
1
Um bom método para remover o espaço em branco exibido: o bloco embutido cria, você pode definir o tamanho da fonte como 0 no elemento do contêiner e definir o desejado para os próprios elementos embutidos. Isso evita a necessidade de remover os espaços em branco no html
AlexMorley-Finch
1
@ AlexMorley-Finch: De fato, essa é uma boa solução. Lembre-se, no entanto, de que não funcionará se você estiver usando tamanhos de fonte em ems. Isso significa que pode não ser uma solução adequada para todos os casos. Você também pode gostar de ver esta resposta que publiquei separadamente, que aborda esse ponto e outras opções para lidar com a questão do espaço em branco.
Spudley
34

Normalmente, uso float: left;e adiciono overflow: auto;para resolver o problema do pai em colapso (por que isso funciona, overflow: autoo pai será expandido em vez de adicionar barras de rolagem, se você não fornecer uma altura explícita, também overflow: hiddenfunciona). A maioria das necessidades de alinhamento vertical que eu tinha são de uma linha de texto nas barras de menus , que podem ser resolvidas usando a line-heightpropriedade Se eu realmente precisar alinhar verticalmente um elemento de bloco, definiria uma altura explícita no pai e no item alinhado verticalmente, posição absoluta, 50% superior e margem negativa.

O motivo pelo qual não uso display: table-cellé o modo como ele transborda quando você tem mais itens do que a largura do site pode suportar. A célula de tabela forçará o usuário a rolar horizontalmente, enquanto os flutuadores envolverão o menu de transbordamento, tornando-o ainda utilizável sem a necessidade de rolagem horizontal.

A melhor coisa sobre float: left e overflow: auto é que ele funciona de volta ao IE6 sem hacks, provavelmente ainda mais.

insira a descrição da imagem aqui

Lie Ryan
fonte
Este ponto excelente, não mencionado em muitos tutoriais populares. Algumas perguntas: isso é realmente testado em navegadores diferentes? Qual é o seu método de escolha para desenhar separador entre dois blocos, como nav e content? A razão pela qual pergunto é porque, se os divs acima tiverem altura diferente, seria difícil.
Shital Shah
@ShitalShah: Não sei bem o que você quer dizer com "isso", mas implementei incontáveis ​​menus horizontais e o flutuador esquerdo e excedente é IMO a maneira mais limpa e confiável de implementar o menu horizontal em vários navegadores diferentes, antigos e antigos. Novo. Para adicionar separadores, eu usaria a borda esquerda (ou imagens de fundo para separadores mais sofisticados, se você não precisa se preocupar com o navegador antigo, também pode usar a imagem de borda CSS3). Não entendo bem o que você quer dizer com alturas diferentes, quer explicar mais ou adicionar um violino?
Lie Ryan
Isso esclareceu muito sobre a limpeza e eu não sabia que o excesso poderia fazer isso. Estou acostumado ao método: after em que você adiciona um conteúdo: "." e visibilidade: oculto. Obrigado por isso
Nils_e 26/04/2015
9

Eu diria que depende do que você precisa:

  1. Se você precisar apenas para obter o layout de 3 colunas, sugiro fazê-lo float.

  2. Se você precisar dele para o menu, poderá usar inline-block. Para o problema de espaço em branco, você pode usar alguns truques, conforme descrito por Chris Coyier aqui http://css-tricks.com/fighting-the-space-between-inline-block-elements/ .

  3. Se você precisar fazer uma opção de múltipla escolha, que a largura precisa se espalhar uniformemente dentro de uma caixa especificada, prefiro display: table. Isso não funcionará corretamente em alguns navegadores, portanto, depende do suporte do seu navegador.

Por fim, qual pode ser o melhor método está usando flexbox. As especificações para isso mudaram algumas vezes, por isso ainda não é estável. Mas, uma vez finalizado, esse será o melhor método que eu acho.

Zendy
fonte
+1 no link para o artigo de Chris Coyier. Uma adição à sua lista é o método que do YUI CSS puro grades usar: github.com/yui/pure/blob/master/src/grids/css/grids-core.css
Web_Designer
4

Eu prefiro o bloco embutido, embora o float também seja útil. A célula da tabela não é renderizada corretamente pelos IEs antigos (nem o bloco embutido, mas há o zoom: 1; *display: inlinehack que eu uso com frequência). Se você tiver filhos com uma altura menor que a dos pais, os flutuadores os levarão ao topo, enquanto o bloqueio embutido às vezes estragará.

Na maioria das vezes, o navegador interpreta tudo corretamente, a menos que, é claro, seja o IE. Você sempre precisa verificar se o IE não é ruim - por exemplo, o conceito de célula de tabela.

Em toda a realidade, sim, tudo se resume à preferência pessoal.

Uma técnica que você pode usar para se livrar do espaço em branco seria definir font-size0 para o pai e depois dar as font-sizecostas para os filhos, embora isso seja um aborrecimento e nojento.

Chade
fonte
se "você sempre tiver que verificar se o IE não é ruim", ficará sempre desapontado. ele Ele. (Por outro lado, ele é toda a razão em dizer que você deve sempre verificar se o seu código não sugam em cada versão do IE você quiser suporte)
Spudley
4

Apenas para o registro, para adicionar à resposta de Spudley, também há a possibilidade de usar position: absolutee margens se você souber as larguras da coluna.

Para mim, o principal problema ao escolher um método é se você precisa das colunas para preencher toda a altura (alturas iguais), onde a célula da tabela é o método mais fácil (se você não se importa muito com navegadores antigos).

Wtower
fonte
0

Eu prefiro inline-block, mas floatainda assim , é uma maneira útil de reunir elemenets HTML, especialmente quando temos elementos nos quais um deve ficar à esquerda e outro à direita, flutuar trabalhando melhor ao escrever menos linhas, enquanto o bloco embutido funciona bem em muitos outros casos .

insira a descrição da imagem aqui

Alireza
fonte