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

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/

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/

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/

display: bloco embutido;

Parece se comportar exatamente como display:inline;.

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

display: célula de tabela;

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

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.

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.

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.

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.

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.

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).

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 .