¿Qué es un HTML flotante?

Una de las etiquetas de lenguaje de marcado de hipertexto (HTML) y hojas de estilo en cascada (CSS) más utilizadas para controlar el diseño de una página es la etiqueta flotante. Cuando se aplica una etiqueta flotante CSS y HTML a un elemento, esa parte de la página flota hacia la izquierda o hacia la derecha. También hace que otros elementos, como el texto, fluyan a su alrededor.

El flotante HTML, que en realidad es una etiqueta CSS aplicada a un elemento HTML, es una propiedad que los diseñadores web utilizan a menudo para lograr una variedad de diseños de página diferentes. Cuando se aplica una propiedad flotante HTML a un elemento de una página, como una imagen o parte de la estructura del sitio, el elemento se elimina del «flujo» normal de la página y flota hacia la izquierda o hacia la derecha. Esto permite al diseñador web un mayor control sobre dónde aparecen los elementos en una página.

Uno de los usos más comunes de la etiqueta flotante CSS y HTML es mover una imagen a la izquierda o derecha de la página. Cuando una imagen flota hacia la derecha, por ejemplo, se mueve hacia el lado derecho del elemento contenedor. El texto de la página también envuelve una imagen flotante.

Hay varias propiedades de una etiqueta flotante HTML que cambian el efecto que tiene en un elemento HTML. Además de flotar hacia la izquierda o hacia la derecha, por ejemplo, el diseñador web puede especificar la etiqueta flotante HTML como «heredar». Esto significa que la etiqueta hereda la propiedad flotante de su elemento contenedor. Si, por ejemplo, una imagen se coloca dentro de un cuadro que flota a la izquierda de una página, la etiqueta heredada también hace que la imagen flote a la izquierda.

Una propiedad útil que se usa a menudo junto con una etiqueta flotante es la etiqueta clara. Esto controla cómo se muestran los elementos después de una etiqueta flotante. Si, por ejemplo, una imagen flota hacia la izquierda pero el texto debajo de ella tiene una etiqueta clara aplicada, el texto siempre aparecerá debajo de la imagen en lugar de junto a ella.

Cuando se introdujo por primera vez la etiqueta flotante CSS y HTML, no todos los navegadores la admitían. Sin embargo, a partir de 2011, todos los navegadores principales admiten la etiqueta flotante. Esto significa que, en teoría, un diseñador web puede usar la etiqueta sin preocuparse de si causará una apariencia diferente según el navegador desde el que el usuario esté viendo el sitio web.