Comportamento

O posicionamento flotante é o máis difícil de comprender pero ao mesmo tempo é o máis utilizado. A maioría de estruturas das páxinas web complexas están deseñadas co posicionamento flotante, como se verá máis adiante.

Cando unha caixa se posiciona co modelo de posicionamento flotante, automaticamente convértese nunha caixa flotante, o que significa que se despraza ata a zona máis á esquerda ou máis á dereita da posición na que orixinalmente se encontraba.

A seguinte imaxe mostra o resultado de posicionar de forma flotante cara á dereita a caixa 1:

Exemplo do comportamento dun elemento flotante á dereita

Exemplo do comportamento dun elemento flotante á dereita.

Cando se posiciona unha caixa de forma flotante:

A caixa deixa de pertencer ao fluxo normal da páxina, o que significa que o resto de caixas ocupan o lugar deixado pola caixa flotante.
A caixa flotante posiciónase o máis á esquerda ou o máis á dereita posible da posición na que se encontraba orixinalmente.

Se no anterior exemplo a caixa 1 se posiciona de forma flotante cara á esquerda, o resultado é o que mostra a seguinte imaxe:

Exemplo do comportamento dun elemento flotante á esquerda

Exemplo do comportamento dun elemento flotante á esquerda.

As caixas flotantes inflúen na disposición de todas as demais caixas. Os elementos en liña fan sitio ás caixas flotantes adaptando a súa anchura ao espazo libre deixado pola caixa desprazada. Os elementos de bloque non lles fan sitio, pero si que adaptan os seus contidos para que non se solapen coas caixas flotantes.

A propiedade CSS que permite posicionar de forma flotante unha caixa denomínase float:

Propiedade	Valores que acepta	Descrición
`float`	`left`: A caixa desprázase ata o punto máis á esquerda posible nesa mesma liña (se non existe sitio nesa liña, a caixa baixa unha liña e se mostra o máis á esquerda posible nesa nova liña). O resto de elementos adxacentes adáptanse e flúen arredor da caixa flotante. `right`: Ten un funcionamento idéntico, salvo que neste caso, a caixa se despraza cara á dereita. `none`: Permite anular o posicionamento flotante de forma que o elemento se mostre na súa posición orixinal.	Establece o tipo de posicionamento flotante do elemento

Os elementos que se encontran ao redor dunha caixa flotante adaptan os seus contidos para que flúan arredor do elemento posicionado:

Exemplo do comportamento dun elemento flotante á esquerda

Elementos que flúen ao redor dun elemento posicionado mediante float.

A regra CSS que se aplica na imaxe do exemplo anterior é:

img {
  float: left;
}

Limpar

Un dos principais motivos para a creación do posicionamento float foi precisamente a posibilidade de colocar imaxes arredor das cales flúe o texto.

CSS permite controlar a forma na que os contidos flúen arredor dos contidos posicionados mediantefloat. De feito, en moitas ocasións é admisible que algúns contidos flúan ao redor dunha imaxe, pero o resto de contidos deben mostrarse na súa totalidade sen fluír arredor da imaxe:

Forzando a que un elemento non flúa arredor doutro elemento posicionado mediante float

Forzando a que un elemento non flúa arredor doutro elemento posicionado mediante float.

A propiedade clear permite modificar o comportamento por defecto do posicionamento flotante para forzar a un elemento a mostrarse debaixo de calquera caixa flotante. A regra CSS que se aplica ao segundo parágrafo do exemplo anterior é a seguinte:

p {
  clear: left;
}

A definición formal da propiedade clear móstrase a continuación:

Propiedade	Valores que acepta	Descrición
`clear`	`left`: O elemento desprázase de forma descendente ata que poida colocarse nunha liña na que non haxa ningunha caixa flotante no lado esquerdo. `right`: O comportamento é análogo, salvo que neste caso se teñen en conta os elementos desprazados cara á dereita. `both`: Despexa os lados esquerdo e dereito do elemento, xa que despraza o elemento de forma descendente ata que o bordo superior se encontre por debaixo do bordo inferior de calquera elemento flotante cara á esquerda ou cara á dereita `none`: Non despexa ningún lado.	Indica o lado do elemento HTML que non debe ser adxacente a ningunha caixa posicionada de forma flotante.

A propiedade clear é imprescindible cando se crean as estruturas das páxinas web complexas.