LM | DÍA 21: PROPIEDAD FLOAT Y CLEAR

Día 21. En el día de hoy, hemos visto dos nuevas propiedades CSS. Se trata de las propiedades float y clear, que nos ayudará en cuanto a la parte de maquetación y posicionamiento de elementos de nuestras páginas webs. 

Derechos de autor aquí

Propiedad Float:

Float se encarga de posicionar una caja, desplazándola todo lo posible a la izquierda o derecha (left o right) de su posición original. Cabe destacar que se desplazará en función de la caja padre en la que se encuentre. 

Su sintaxis es: float: left (también puede ser, por ejemplo, right).

A continuación, veamos un ejemplo que he realizado para poder comprender el uso del float con un caso práctico. 

Captura de código de prueba en Visual Studio Code del autor de este blog.

Resultado del código mostrado anteriormente

Como podemos ver, con la propiedad float, conseguimos que el objeto seleccioando flote respecto al resto. Como es este caso, al asingnarle la propiedad float right a la imagen, automáticamente, floatará a la derecha, quedando metido en medio del texto. Finalmente, para que quede un poco mejor, añadimos un margin para que no esté pegado a la imagen del texto. 

Propiedad clear: 

Clear especifica si un elemento puede estar al lado o no de elemento flotantes o si, por el contrario, debe de ser movido justo debajo. 

Normalmente, se suele utilizar esta propiedad en elementos de una página web como es el caso del pie de página. 

Los atributos que puede recibir son right, left o booth.