CSS | Como usar las propiedades FLOAT y CLEAR

Las propiedades FLOAT CLEAR son muy importantes a la hora de diseñar nuestra página, ya que serán las que posicionen nuestras div a traves de la web que estemos creando. En este post hablaremos de como  y cuando usarlas.

FLOAT

La propiedad FLOAT significa FLOTAR, esto quiere decir en término web, que nuestra div estará “flotando” hacia la izquierda o la derecha, según como lo queramos.

Comenzamos con lo primordial, como escribimos float:

Ahora creamos un estilo.

Abrimos nuestro editor de texto o cualquier software que estemos usando para diseño web y crearemos 3 divs para ver como se ve sin la propiedad FLOAT:

EJEMPLO:

Si a este ejemplo lo miráramos en nuestro explorador veríamos algo así:

Como podrán ver sin FLOAT, nuestras DIVS aparecen una debajo de la otra.

AGREGANDO LA PROPIEDAD FLOAT

En este ejemplo, le añadiremos a cada DIV, float: left; esto quiere decir que las DIVS estarán flotando hacia la izquierda

EJEMPLO:

Aca vemos como cada DIV flota hacia la izquierda:

Si a nuestro código le asignaramos float: right, pasaria esto:

Las DIVS flotan hacia la derecha.

CLEAR

La propiedad clear nos servirá para poner una div debajo de las otras por más que estas tengan la propiedad FLOAT: LEFT, les muestro un ejemplo:

Código:

Como ven a la div .c le asignamos clear: left, como resultado obtendriamos esto:

Un Ejemplo de lo que se puede hacer con FLOAT y CLEAR:

Scroll to top