Fluxo

O fluxo de uma página web determina a ordem na qual os elementos são exibidos vertical e horizontalmente. Por padrão, os elementos são mostrados na ordem em que aparecem no documento HTML, de cima para baixo. O fluxo horizontal normalmente se move da esquerda para a direita; no entanto, o fluxo também é invertido da direita para esquerda em idiomas que são lidos da direita para a esquerda.

Cada elemento em HTML é uma área retangular que ocupa uma posição em uma linha, semelhante a palavras em uma folha pautada. Existem dois tipos principais de elementos: elementos de bloco e elementos inline.

Após analisar o exemplo, podemos dizer:

Elemento de bloco ocupa toda a linha. Não importa o comprimento do conteúdo. Elementos de bloco se seguem de cima para baixo.

Elemento inline ocupa o espaço levando em consideração o tamanho do conteúdo. É por isso que alguns elementos inline podem estar na mesma linha. Quando não há espaço suficiente em uma linha para acomodar todos os elementos, então eles são transferidos para uma nova linha.

Nota

A propriedade de exibição dos elementos HTML é predefinida de acordo com padrões e convenções estabelecidos pela especificação HTML. Estes padrões ditam o comportamento de renderização padrão dos elementos em diversos navegadores. Você pode encontrar o tipo específico de qualquer elemento nos links de referência ou especificação fornecidos: Referência HTML e Especificação HTML.

Tipos de elementos

Como mencionado anteriormente, cada elemento na folha de estilo do navegador tem um tipo representado pela propriedade display, que determina seu comportamento. Os dois principais tipos de elementos são elementos de block e elementos inline, e também existem tipos adicionais, como elementos inline-block.

Elementos inline são utilizados principalmente para estilizar e destacar conteúdos de texto, como links, botões e imagens. Eles são posicionados em uma única linha até que não haja mais espaço. Quando a linha está completa, eles saltam para a próxima linha e continuam a preenchê-la.

Elementos de bloco destinam-se a definir contêineres de texto como títulos, listas e parágrafos, além de seções semânticas maiores, como cabeçalhos, rodapés e seções. São visualmente representados como áreas retangulares empilhadas umas sobre as outras verticalmente.