Elementos a nivel de bloque en una página web aparecen en orden secuencial. Para mejorar la apariencia o utilidad de la página, puede modificar ese orden envolviendo bloques, incluidas imágenes, de modo que el texto fluye alrededor de las imágenes.
En términos de diseño web, este efecto se conoce como flotar la imagen. Esto se logra con el Propiedad CSSflotador, que permite que el texto fluya alrededor de la imagen alineada a la izquierda a su lado derecho (o alrededor de una imagen alineada a la derecha a su lado izquierdo).
Comience con HTML
Este ejemplo agrega una imagen al principio de un párrafo (antes del texto, pero después de la apertura
etiqueta). Aquí está el marcado HTML inicial:
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto en la cabeza, por lo que este texto podría describir a la persona en la foto.
De forma predeterminada, la página se mostraría con la imagen sobre el texto, porque las imágenes son elementos de nivel de bloque en HTML. Esto significa que el navegador muestra saltos de línea antes y después del elemento de imagen de forma predeterminada. Para cambiar este aspecto predeterminado usando CSS, agregue un valor de clase (
izquierda) al elemento de imagen para que sirva como un gancho al que se pueden adjuntar propiedades.El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto en la cabeza, por lo que este texto podría describir a la persona en la foto.
Tenga en cuenta que esta clase no hace nada por sí sola. CSS logrará el estilo deseado.
Agregar estilos CSS
Agregue esta regla al sitio hoja de estilo:
.izquierda {
flotador izquierdo;
relleno: 0 20px 20px 0;
}
Este estilo flota cualquier cosa con la clase. izquierda a la izquierda de la página y agrega un poco relleno a la derecha y la parte inferior de la imagen para que el texto no se junte con ella.
En un navegador, la imagen ahora estaría alineada a la izquierda; el texto aparecería a su derecha con un espacio entre los dos.
El valor de la clase .izquierda utilizado aquí es arbitrario. Puedes llamarlo como quieras porque no hace nada por sí solo. Sin embargo, tampoco debería que cualquier valor que cambie en el CSS también se refleje en el HTML.
Otras formas de lograr estos estilos
También puede quitar el valor de clase de la imagen y darle estilo con CSS escribiendo un selector más específico. En el siguiente ejemplo, la imagen está dentro de una división con un contenido principal valor de clase.
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto en la cabeza, por lo que este texto podría describir a la persona en la foto.
Para diseñar esta imagen, escriba este CSS:
.main-content img {
flotador izquierdo;
relleno: 0 20px 20px 0;
}
En este escenario, la imagen se alinea a la izquierda, con el texto flotando a su alrededor como antes, pero sin el valor de clase adicional en el marcado. Hacer esto a escala puede ayudar a crear un archivo HTML más pequeño, que será más fácil de administrar y puede mejorar el rendimiento.
Evite los estilos en línea
Finalmente, podrías usar estilos en línea:
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto en la cabeza, por lo que este texto podría describir a la persona en la foto.
Sin embargo, esto no es recomendable porque combina el estilo de un elemento con su marcado estructural. Las mejores prácticas dictan que el estilo y la estructura de una página permanezcan separados. Esta segregación es especialmente útil cuando necesita cambiar el diseño de la página y buscar diferentes tamaños de pantalla y dispositivos con un sitio web receptivo.
Entrelazar el estilo de la página con el HTML hace creación de consultas de medios ajustar su sitio para diferentes pantallas mucho más difícil.