¿Has oído hablar del CSS flotante? Esta técnica de diseño web es esencial para lograr diseños atractivos y modernos en cualquier página. En este artículo de TIEngranaje, te explicaremos todo lo que necesitas saber sobre el CSS flotante: cómo se usa, cuáles son sus características, y cómo puede mejorar la navegación en tu sitio web. ¡No te lo pierdas!
El Propiedad flotante de CSS permite a un desarrollador incorporar columnas similares a tablas en un diseño HTML sin el uso de tablas. Con CSS float, un elemento se puede empujar hacia la izquierda o hacia la derecha, lo que permite que otros elementos lo rodeen.
elementos flotantes permanecer una parte del flujo de la página web, a diferencia de elementos que utilizan el posicionamiento absoluto. Los elementos de página absolutamente posicionados son remoto del flujo de la página web.
Elementos flotar horizontalmente (derecha o izquierda) y no verticalmente (arriba o abajo). Cuando se ha especificado que un elemento flote, se moverá hacia la izquierda o hacia la derecha tanto como pueda. Los elementos después del elemento flotante fluirán a su alrededor.
Esto es muy similar a lo que verías en la página de una revista. Valores para la propiedad float son left, right, noney inherit. La mayoría de las veces, especificará el right y left valores.
img {
float:left;
}Borrar propiedad
Los elementos después del elemento flotante fluirán a su alrededor. A evitar esto, usa el clear propiedad. Los valores posibles son left, right, both, noney inherit.
Por ejemplo, si desea mostrar texto en la página después dos elementos que han sido flotadoy no desea que el texto fluya alrededor de los elementos flotantes, puede especificar que el siguiente elemento tenga estilo con clear:both. De esta manera, el siguiente elemento será claro ambos elementos y no fluir alrededor de ellos.
p.clear {
clear:both;
}A continuación, puede asignar esta clase a un párrafo después de uno o más elementos que han sido flotados. El párrafo borrará el elemento anterior y no fluirá alrededor de él.
