Skip to main content

¿Qué es un flotante HTML?

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 a menudo usan los diseñadores web para lograr una variedad de diseños de página diferentes. Cuando se aplica una propiedad flotante HTML a un elemento en 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 se 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 para la etiqueta flotante CSS y HTML es mover una imagen a la izquierda o derecha de la página. Cuando una imagen flota a la derecha, por ejemplo, se mueve hacia el lado derecho del elemento contenedor. El texto en la página también se ajusta a 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 se flota a la izquierda de una página, entonces la etiqueta de herencia también hace que la imagen se flote a la izquierda.

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

Cuando se introdujo por primera vez la etiqueta flotante CSS y HTML, no todos los navegadores la admitían. A partir de 2011, sin embargo, todos los principales navegadores admiten la etiqueta flotante. Esto significa que un diseñador web teóricamente puede usar la etiqueta sin preocuparse de si causará una apariencia diferente dependiendo del navegador desde el cual el usuario está viendo el sitio web.