Vale a pena determos para explicar mais detalhadamente o que é o fluxo HTML, pois é um conceito simples e básico para poder entender muitos assuntos sobre o posicionamento web e mais concretamente o posicionamento com CSS.

O fluxo da página é algo assim como o fluxo de escritura de elementos dentro da tela que nos apresenta o navegador. Sabemos que as páginas web são codificadas em HTML e os elementos aparecem no código em uma posição dada. O navegador, no momento que interpreta o código HTML da página, vai colocando na página os elementos (definidos por meio de etiquetas HTML) segundo vai encontrando-os no mesmo código.

Por exemplo, pensemos em uma página que tem um titular com H1, logo vários parágrafos e alguma imagem. Pois se o primeiro que aparece no código HTML for o cabeçalho H1, pois esse cabeçalho aparecerá na página também em primeiro lugar. Logo, se colocarão os parágrafos e se a imagem aparecia no código por último, na página também aparecerá ao final. Ou seja, os elementos aparecem colocados tal como estiverem ordenados no código. Isto é chamado de fluxo HTML, a colocação dos elementos no lugar que corresponda segundo seu aparecimento no código.

Isto em geral ocorre com qualquer dos elementos da página. Entretanto, há alguns atributos HTML que podem marcar distintas propriedades no fluxo, como que uma imagem se alinhe à direita, com align="right", com o texto do parágrafo que possa ter a seguir rodeando a imagem. Porém, com HTML, se por exemplo, uma imagem vai antes que um parágrafo, nunca vamos poder trocar suas posições e colocar a imagem detrás do parágrafo que lhe segue no código.

Isto não ocorre de igual maneira quando trabalhamos com CSS, visto que existem diversos atributos que podem mudar radicalmente a forma na que se mostram na página, por exemplo, o atributo position que pode definir valores como absolute, que rompe o fluxo da página, o melhor dito, tira do fluxo da página ao elemento que lhe atribui.

Comportamentos inline e block e como afetam ao fluxo da página

Quando tratamos com etiquetas, existem dois modos principais de comportamento. Etiquetas como uma imagem, ou um negrito, que funcionam em linha ("inline"), ou seja, que se colocam na linha onde se está escrevendo e onde os elementos seguintes, sempre que também sejam "inline" se posicionam todo seguido na mesma linha. Temos por outra parte os elementos que funcionam como bloco ("block") que implicam quebras de linha antes e depois do elemento. Por exemplo, os parágrafos ou cabeçalhos são elementos com comportamento pré-determinado tipo "block".

Duas etiquetas muito utilizadas na construção CSS são DIV e SPAN. Uma das diferenças principais é que DIV funciona com comportamento "block" e SPAN funciona como "inline". Na verdade, este é o comportamento padrão, visto que nós com CSS em qualquer momento podemos mudá-lo por meio do atributo display. Por exemplo:

<div style="display: inline;">
Este elemento funcionará em linha
</div>

Ou então:

<span style="display: block;">
Este span agora funciona como bloco
</span>

Realmente ambas possibilidades funcionam dentro do fluxo HTML normal, por isso, tanto os elementos display inline como display block, se encontram dentro do fluxo HTML padrão, a única diferença é que os blocos se escrevem em linhas independentes, ou seja, com quebras de linha antes e depois do elemento, assim como uma quantidade de margem acima e abaixo que depende do tipo de elemento de que se trate.

Atributo CSS Float e o fluxo

Outro atributo que afeta o fluir dos elementos na página é o atributo float de CSS, que se utiliza bastante na construção web. Este atributo podemos utilizá-lo sobre elementos da página de tipo "block" e o que faz é convertê-los, em "flutuantes" que é um comportamento parecido ao que seria o mencionado anteriormente "inline". Com float podemos indicar tanto left como right e conseguiremos que os elementos se posicionem à esquerda ou à direita, com o conteúdo que se coloque a seguir rodeando ao elemento flutuante. A diferença é que os elementos continuam sendo tipo "block" e aceitam atributos como a margem (atributo CSS margin), para indicar que haja um espaço em branco aos lados e acima e abaixo do elemento.

Por exemplo, os elementos das listas (etiqueta LI) são por padrão de tipo "block", por isso aparecem sempre um abaixo do outro, em linhas consecutivas. Porém, nós poderíamos mudar esse comportamento com:

li{
   float: right;
}

Assim, uma lista como esta:

<ul>
<li>Elemento1</li>
<li>Elemento2</li>
<li>Elemento3</li>
</ul>

Veríamos como o primeiro elemento aparece à direita de tudo e os outros elementos vão se colocando na mesma linha no seguinte espaço livre que houver. Assim, o segundo elemento se colocaria na mesma linha, todo à direita que puder, conforme o espaço que tiver no contêiner aonde estiverem.

Fluxo e o atributo position

O atributo position de CSS sim que é capaz de mudar radicalmente o fluxo dos elementos da página. Este atributo, que explicaremos com detalhe mais adiante em outros artigos de CriarWeb.com, por padrão, tem o valor "static", que indica que o elemento faz parte do fluxo HTML normal da página.

Entretanto, com o atributo CSS position, podemos indicar outros valores que fazem com que os elementos saiam do fluxo HTML e se posicionem em lugares fixos, que não têm a ver com a posição na que apareçam no código HTML. Por exemplo:

<div style="position: absolute; top: 10px; left: 100px;">
Este elemento tem posicionamento absoluto
</div>

Faz com que esse elemento fique fora do fluxo de elementos na página e então, apareceria no lugar que se indica com os atributos top e left (top indica a distância desde a parte de cima e left a distância desde a borda esquerda). Os outros elementos que fazem parte do fluxo da página não ficam afetados pelos elementos com posicionamento absoluto.

Outro valor para o atributo position que faz com que os elementos fiquem posicionados fora do fluir normal de elementos na página é "fixed", cujo comportamento veremos mais adiante em outros artigos.