Los elementos a nivel de bloque en una página web aparecen en orden secuencial. Para mejorar la apariencia o utilidad de page & amp; apos; s, puede modificar ese orden envolviendo bloques, incluidas imágenes, para que el texto fluya 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 flotador de propiedad CSS , que permite que el texto fluya alrededor de la imagen alineada a la izquierda hacia su lado derecho (o alrededor de una imagen alineada a la derecha hacia su lado izquierdo).
:max_bytes(150000):strip_icc():format(webp)/GettyImages-562451697-5772ffb25f9b5858753473c3.jpg)
& lt; / img & gt ;
Maskot / Getty Images
Comience con HTML
Este ejemplo agrega una imagen al comienzo de un párrafo (antes del texto, pero después de la apertura
etiqueta). Aquí & amp; apos; s el marcado HTML inicial:
Video destacado
& lt; pre / & gt ;
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto de la cabeza, por lo que este texto podría describir a la persona en la cabeza.
& lt; br & gt ;
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 & amp; nbsp; ( a la izquierda ) al elemento de imagen para servir como un gancho al que se pueden adjuntar las propiedades.
& lt; pre / & gt ;
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto de la cabeza, por lo que este texto podría describir a la persona en la cabeza.
& lt; br & gt ;
Tenga en cuenta que esta clase no hace nada por sí sola.& amp; amp; nbsp; CSS logrará el estilo deseado.
Agregar estilos CSS
Agregue esta regla a la hoja de estilo del sitio & amp; apos; s:
& lt; pre & gt; .left {& lt; br & gt ;
flotador: izquierda; & lt; br & gt ;
acolchado: 0 20px 20px 0; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
Este estilo flota cualquier cosa con la clase izquierda a la izquierda de la página y agrega un poco de relleno a la derecha e inferior de la imagen para que el texto no se acerque a ella.
En un navegador, la imagen ahora estaría alineada a la izquierda; el texto aparecería a su derecha con espacio entre los dos.
El valor de clase .left utilizado aquí es arbitrario. Puedes llamarlo como elijas porque no hace nada por sí solo. Sin embargo, tampoco debe que ningún 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 diseñarla con CSS escribiendo un selector más específico. En el siguiente ejemplo, la imagen está dentro de una división con un valor de clase de contenido principal .
& lt; pre / & gt ;
& lt; br & gt ;
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto de la cabeza, por lo que este texto podría describir a la persona en la cabeza.
& lt; br & gt ;
& lt; br & gt ;
Para diseñar esta imagen, escriba este CSS:
& lt; pre & gt; .contenido principal img {& lt; br & gt ;
flotador: izquierda; & lt; br & gt ;
acolchado: 0 20px 20px 0; & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / pre & gt ;
En este escenario, la imagen está alineada 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, puede usar estilos en línea:
& lt; pre / & gt ;
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto de la cabeza, por lo que este texto podría describir a la persona en la cabeza.
& lt; br & gt ;
Sin embargo, esto no es aconsejable 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 permanecen separados. Esta segregación es especialmente útil cuando necesita cambiar el diseño de la página y los apos; s 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 que las consultas de autoría de medios para ajustar su sitio para diferentes pantallas sea mucho más difícil.
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& lt; / br & gt ;
& amp; # x203A; Informática
