O fluxo normal é a forma en que os elementos se amosan nunha páxina web na maioría das circunstancias. Todos os elementos en HTML están dentro de caixas que son caixas en liña ou caixas de bloque .
Colocando caixas de bloqueo
No fluxo normal, as caixas de bloqueo sitúanse nunha páxina unha despois da outra (na orde que escriben no HTML ). Comezan na parte superior esquerda da caixa que contén e pila de arriba abaixo. A distancia entre cada caixa defínese polas marxes con márgenes superiores e inferiores colapsándose entre si.
Por exemplo, pode ter o seguinte HTML:
Este é o primeiro div. Ten 200 píxeles de ancho cunha marxe de 5px ao redor dela.
Este é un div máis amplo.
Este é un div que é un pouco máis amplo que o segundo.
Cada DIV é un elemento de bloque, polo que se colocará debaixo do elemento de bloque anterior. Cada bordo exterior esquerdo toque o bordo esquerdo do bloque que contén.
Colocando caixas en liña
As caixas en liña están dispostas na páxina horizontalmente, unha despois do outro, que comeza na parte superior do elemento do contedor. Cando non hai espazo suficiente para encaixar todos os elementos da caixa en liña nunha liña, eles envólvense á seguinte liña e pila verticalmente desde alí.
Por exemplo, no seguinte HTML:
Este texto é en negra e este texto é cursiva . E este é un texto sinxelo.
O parágrafo é un elemento de bloque, pero hai 5 elementos en liña:
- "Este texto é"
- "negriña"
- "e este texto é"
- "cursiva"
- "E este é un texto sinxelo".
Polo tanto, o fluxo normal é como se mostrarán estes bloques e elementos en liña na páxina web sen a intervención do diseñador web.
Se queres afectar onde está un elemento nunha páxina pode usar o posicionamento CSS ou os flotadores CSS .