flutuar: esquerda; vs display: inline; vs display: inline-block; vs display: table-cell;

Minhas perguntas)

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

Algum desses métodos é preferido por um navegador da Web ao desenhar o site?

Isso tudo é apenas uma preferência pessoal?

Existem outras técnicas que estão faltando?

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

flutuar: esquerda;

http://jsfiddle.net/CDe6a/

Esse é o método que sempre uso ao criar layouts de colunas e parece funcionar bem. O pai colapsa em si mesmo, então você só precisa se lembrar declear:both; depois. Outrovigarista que acabei de encontrar foi a incapacidade de alinhar o texto verticalmente.

display: inline;

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

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

Removendo espaço em branco de html parece ser o mais fácil corrigir este problema, mas não é desejado se você é realmente exigente sobre o seu html.

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

display: bloco inline;

Parece se comportar exatamente comodisplay:inline;.

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

display: célula de tabela;

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

Funciona perfeito.

Meus pensamentos:

Tenho certeza que estou perdendo uma tonelada de coisas, como certas exceções que vão quebrar o layout, masdisplay:table-cell; parece funcionar melhor, e acho que vou começar a substituirfloat:left; como eu sempre pareço estragarclear:both;. Eu li muitos artigos e blogs sobre isso na web, mas nenhum deles me deu uma resposta definitiva sobre o que devo usar ao criar meu website.

questionAnswers(6)

yourAnswerToTheQuestion