Un elemento de nivel de bloque en un documento HTML (por ejemplo, una página web) aparece en orden secuencial. Para modificar el orden para hacer que la página se vea más atractiva o para mejorar su utilidad, necesitará envolver los bloques, incluidas las imágenes, para que el texto de esa página fluya a su alrededor.
En términos web, este efecto se conoce como "flotando" la imagen. Este estilo se logra con la propiedad CSS para "flotar". Esta propiedad 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 en su lado izquierdo.
Comience con HTML
Lo primero que tendrá que hacer es tener algo de HTML para trabajar. Para nuestro ejemplo, escribiremos un párrafo de texto y agregaremos una imagen al principio del párrafo (antes del texto, pero después de la apertura).
etiqueta). Aquí es cómo se ve ese marcado HTML:
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto de disparo en la cabeza, por lo que este texto probablemente se refiera a la persona para quien es el disparo de cabeza.
De forma predeterminada, nuestra página web se mostraría con la imagen sobre el texto, porque las imágenes son elementos a nivel de bloque en HTML. Esto significa que el navegador muestra los saltos de línea antes y después del elemento de imagen de forma predeterminada. Vamos a cambiar este aspecto predeterminado cambiando a CSS. Primero, sin embargo, agregaremos un valor de clase a nuestro elemento de imagen. Esa clase actuará como un "gancho" que usaremos en nuestro CSS más adelante.
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto de disparo en la cabeza, por lo que este texto probablemente se refiera a la persona para quien es el disparo de cabeza.
Tenga en cuenta que esta clase de "izquierda" no hace nada por sí solo. Para que podamos lograr nuestro estilo deseado, necesitamos usar CSS a continuación.
Estilos CSS
Con nuestro HTML en su lugar (incluido nuestro atributo de clase de "izquierda") ahora podemos recurrir a CSS. Agregaríamos una regla a nuestra hoja de estilo que flotaría en esa imagen y también agregaríamos un pequeño relleno junto a ella para que el texto que finalmente se ajuste a la imagen no se apoye demasiado en ella. Aquí está el CSS que puedes escribir:
.izquierda { flotador izquierdo; relleno: 0 20px 20px 0;}
Este estilo hace flotar esa imagen a la izquierda y agrega un poco de relleno (usando un poco de CSS) a la derecha y abajo de la imagen. Si revisó la página que contiene este HTML en un navegador, la imagen ahora se alineará a la izquierda y el texto del párrafo aparecerá a su derecha con una cantidad adecuada de espacio entre los dos. Note que el valor de clase de "izquierda" que usamos es arbitrario. Podríamos haberlo llamado cualquier cosa porque el término "izquierda" no hace nada por sí solo. Cualquier término que use debe tener un atributo de clase en el HTML que funcione con un estilo CSS real que dicte los cambios visuales que desea realizar. Este enfoque de darle al elemento de imagen un atributo de clase y luego usar un estilo CSS general que hace flotar el elemento es solo una forma en que podría lograr este aspecto de "imagen alineada a la izquierda". También puede quitar el valor de clase de la imagen y diseñarlo con CSS escribiendo un selector más específico. Por ejemplo, veamos un ejemplo donde esa imagen está dentro de una división con un valor de clase de "contenido principal". Para diseñar esta imagen, puedes escribir este CSS: .main-content img { flotador izquierdo; relleno: 0 20px 20px 0;}
En este escenario, nuestra imagen se alinearía a la izquierda, con el texto flotando alrededor como antes, pero no necesitamos agregar un valor de clase adicional a nuestro 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 también puede ayudar a mejorar el rendimiento. Finalmente, incluso podría agregar los estilos directamente en su marca HTML, como esto:
Este método se llama "estilos en línea". No es recomendable porque combina el estilo de un elemento con su marcado estructural. Las mejores prácticas de la web dictan que el estilo y la estructura de una página deben permanecer separados. Esta segregación es especialmente útil cuando su página necesita cambiar su diseño y buscar diferentes tamaños de pantalla y dispositivos con un sitio web sensible. Tener el estilo de la página entrelazado en el HTML hará que sea mucho más difícil crear consultas de medios que ajustarán el aspecto de su sitio según sea necesario para esas diferentes pantallas. Formas alternativas para lograr estos estilos
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto de disparo en la cabeza, por lo que este texto probablemente se refiera a la persona para quien es el disparo de cabeza. Evitar los estilos en línea
El texto del párrafo va aquí. En este ejemplo, tenemos una imagen de una foto de disparo en la cabeza, por lo que este texto probablemente se refiera a la persona para quien es el disparo de cabeza.
