O segredo para projetar layouts de site sem CSS Floats

Se você tem projetado para a Web em toda a última década, você está, sem dúvida, familiarizado com a propriedade float CSS. Desde que a indústria (felizmente) adotou o princípio dos layouts sem tablete, os carros alegóricos têm sido a arma preferida que a maioria de nós usa para criar nossas páginas na web, mas é a melhor escolha?

Apesar da popularidade deste método, ele é regularmente a causa de frustração e confusão para novos projetistas e se torna um problema quando elementos flutuantes são deixados "não limpos". Esses flutuadores não limpos podem causar vários problemas, desde a estética desleixada até a inacessibilidade total. Com um projeto pequeno, é bastante simples criar um problema de flutuação, mas quando se trabalha em um aplicativo web grande com conteúdo dinâmico, ele pode ser um pouco mais complicado, consumindo um tempo precioso e custando dinheiro.

Uma alternativa melhor

Mesmo quando usado corretamente, os flutuadores mudam fluxo normal de um documento que pode causar comportamento inesperado e limitar as opções de estilo. Como um float não está no 'fluxo normal', as caixas de bloco não posicionadas criadas antes e depois da caixa flutuante fluem verticalmente, como se o flutuador não existisse. Com design responsivo, onde os tamanhos são dinâmicos e fluem para preencher o espaço disponível, isso está longe de ser ideal. E se houvesse uma maneira melhor?

Flexbox é o futuro empolgante dos layouts da web, mas, para aqueles de nós que precisam suportar navegadores legados, esse ainda é um sonho distante. A propriedade display , por outro lado, tem suporte total e pode fornecer quase toda a funcionalidade de layout de um float sem os inconvenientes.

inline-block para o resgate

A propriedade display , em combinação com float e position , determina o tipo de caixa ou caixas que são geradas para um elemento. Em poucas palavras, os elementos de nível de bloco abrangem toda a largura de seu contêiner, forçando todos os elementos subseqüentes à próxima linha, enquanto os elementos de nível inline somente abrangem a largura de seu conteúdo, permitindo que qualquer elemento de nível inline flua próximo a ele na mesma linha. linha.

A aplicação de display: inline-block a um elemento gera um contêiner de bloco no nível in-line. Pense no texto dentro de uma tag. Eles são todos "inline" um com o outro, enquanto a tag em si é um contêiner em nível de bloco. Compreendendo esse comportamento, podemos usar a propriedade display para alinhar nosso conteúdo ao lado um do outro. Como todos os nossos elementos permanecem no fluxo normal, não temos problemas com um elemento pai recolhido. Na minha opinião, esta é uma solução muito mais limpa que ainda alcança o resultado desejado.

Veja a caneta Inline-block over floats por davidicus em CodePen.

A tecnica

Esse método funciona praticamente em qualquer lugar em que você normalmente aplicaria o float. Vamos dar uma olhada no layout clássico principal / barra lateral. Para o HTML, temos um elemento wrapper com dois elementos filhos dentro, assim:

Nosso CSS:

        .wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}

Assim, temos o conteúdo principal e a barra lateral expostos.

A direção do “float” é determinada pelo alinhamento do texto do wrapper div. Como o alinhamento padrão é deixado, não precisamos fazer nada. No entanto, você pode facilmente configurá-lo para o centro ou para a direita para obter alguns layouts que não são possíveis com floats (mais sobre isso depois). Observe o comentário "sem espaços" colocado entre os dois divs filhos do contêiner .wrapper . Isto é importante notar, e a razão para fazer isso é o único "con" sobre este método.

Espaço em branco

Vamos voltar ao exemplo da tag. Ao escrever texto em html, todo o espaço em branco é agrupado em um único caractere de espaço em branco, independentemente da quantidade de espaços que você tenha em seu documento HTML. Assim, quaisquer lacunas que você tenha entre seus elementos "flutuantes" na marcação serão realmente registradas como um espaço entre elas no navegador, assim como o texto do parágrafo. Isso naturalmente fará com que seus cálculos de tamanho sejam desativados, derrubando o último elemento até o próximo nível da página. Não é bom! Felizmente para nós, existem várias soluções para corrigir este pequeno problema. Tal como:

• Definir tamanho da fonte: 0; . O espaço com o qual estamos lidando é um espaço de caractere, então definir o tamanho da fonte como zero também faz o tamanho do espaço zero. O problema com isso é que você deve fazer o backup dos tamanhos das fontes dos elementos filho e o tamanho de todos eles sai completamente da janela. Isso pode ficar um pouco pesado para se manter no topo, então, dessa forma, não é o ideal.

• Remova o espaço entre seus elementos em seu HTML, removendo assim o espaço da equação. Eu fiz isso por um tempo, mas apenas parecia desleixado e dificultava a leitura.

• Adicionar um comentário HTML entre seus elementos também removerá o caractere de espaço como no nosso exemplo. Esta é a minha solução preferida . O texto destacado na maioria dos editores de texto é tal que o contraste entre a nota e os elementos é suficiente para melhorar significativamente a legibilidade da sua marcação. Isso também permitirá que você mantenha o recuo adequado do elemento em si.

Flutuadores funcionam para mim, por que mudar?

Você pode estar pensando: “Isso é bom e tudo, mas por que eu mudaria um método que funciona bem para mim?” Bem, mesmo que você seja um mestre em float, há certas coisas que eles simplesmente não podem fazer. Por exemplo:

• O elusivo "float centralizado", que muitas vezes é desejável, requer marcação adicional e várias propriedades CSS para alcançar. Com o método de exibição, isso é feito simplesmente aplicando text-align: center ao wrapper.

• A maior vantagem de escolher o método de exibição é a capacidade de alinhar verticalmente seu conteúdo. Quantas vezes você quis centrar um elemento em seu irmão? Você pode usar o posicionamento com a margem negativa / truque de conversão, mas, novamente, com um ambiente responsivo e dinâmico, isso não é preferível. Em vez de aplicar vertical-align: middle; centrará perfeitamente seus elementos a cada vez, sem nenhum trabalho extra de sua parte. (Veja a caneta Inline-block over floats por davidicus em CodePen.)

Para embrulhar

Na realidade, não existe um "tamanho único" quando se trata de web design e realmente se resume a preferência pessoal. Eu ainda uso carros alegóricos em certas situações e às vezes é a melhor ferramenta para o trabalho. No entanto, sinto que há uma vantagem definitiva em usar o método de exibição. Pela minha experiência, descobri que é o melhor método menos propenso a erros para lidar com layouts. Para aqueles de vocês que gostariam de explorar este método mais, eu criei uma grade "Just Say No To Floats": Grelha Inline com SASS em CodePen.

Imagem em destaque / miniatura, parede colapsada via Chris Cotterman