Fluxo normal: como o navegador organiza o conteúdo por padrão

Um algoritmo de layout que você nunca precisou escrever

Toda página desta série até agora saiu com o layout certo sem uma única regra de layout. Títulos empilham acima de parágrafos, e uma palavra em <strong> fica dentro da frase em vez de pular para uma linha própria. Não é acidente. É o algoritmo de layout embutido do navegador, chamado fluxo normal, que roda em todo elemento que não pede outra coisa.

Dois tipos de caixa, duas regras diferentes

O curso CSS box model mostrou que todo elemento vira uma caixa retangular. O fluxo normal acrescenta uma ideia: cada caixa segue um de dois padrões de layout, definido pelo valor de display do elemento. Este curso cobre esses dois padrões, mais um híbrido que a aula 4 apresenta.

flowchart TB
  subgraph BL["Caixas block — cada uma na própria linha, largura total"]
    direction TB
    B1["block um"]
    B2["block dois"]
  end
  subgraph IN["Caixas inline — fluindo juntas numa linha só"]
    direction LR
    I1["word"] --- I2["another"] --- I3["more"]
  end
  BL --> IN

Caixas block empilham na vertical. Cada uma ocupa a largura disponível inteira e começa numa linha nova, como parágrafos, títulos e seções. Caixas inline fluem lado a lado dentro de uma linha de texto, como palavras. Elas só quebram para a linha seguinte quando falta espaço, como uma palavra em negrito ou um link no meio da frase.

Todo elemento tem um padrão

Você conta com isso desde o primeiro curso de HTML. Um <p> se comporta como block e um <strong> como inline sem nenhum CSS. Todo elemento HTML vem com um display padrão baseado no conteúdo que costuma guardar. Por isso um HTML simples, sem estilo, já se lê de cima para baixo numa ordem sensata.

<h2>Um Título</h2>
<p>Um parágrafo com uma <strong>frase em negrito</strong> e um <a href="#">link</a> dentro dele.</p>

<h2> e <p> são block por padrão, cada um na sua linha. <strong> e <a> dentro do parágrafo são inline por padrão e fluem com as palavras ao redor. Ninguém escreveu display nesse trecho; o navegador já sabia.

display é só mais uma propriedade CSS

Aqui está o detalhe em torno do qual este curso gira. display é uma propriedade CSS comum, como color ou padding. O "padrão" de um elemento é só a folha de estilo embutida do navegador definindo essa propriedade antes do seu CSS rodar. Você pode sobrescrevê-la: display: inline numa <div>, display: block num <span>. O elemento muda de comportamento de layout e mantém o significado HTML. As próximas aulas cobrem essa troca e o que ela muda.

O que este curso cobre

• Aula 1, Fluxo normal: o algoritmo de layout padrão do navegador e seus dois tipos de caixa (você está aqui)
• Aula 2, display: block: largura total, empilhado, um por linha
• Aula 3, display: inline: flui com o texto, ignora largura e altura
• Aula 4, display: inline-block: o híbrido que fica na linha e respeita dimensões
• Aula 5, display: none vs visibility: hidden: dois jeitos de fazer algo sumir
• Aula 6, Sobrescrevendo o padrão: mudando o display de qualquer elemento de propósito
• Aula 7, Juntando tudo: lendo o fluxo de uma página real, caixa por caixa

No final, você vai conseguir prever como qualquer elemento se comporta no fluxo, com o padrão ou com um valor que você escolheu.