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 que la página se vea más atractiva o para mejorar su utilidad, tendrás que envolver los bloques, incluyendo las imágenes, de modo que el texto de esa página fluya a su alrededor.
En términos web, este efecto se conoce como «floating» de la imagen. Este estilo se consigue con la propiedad CSS para «float». 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 a su lado izquierdo.
Índice de contenidos
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 añadiremos una imagen al principio del párrafo (antes del texto, pero después de la etiqueta de apertura). A continuación se muestra el aspecto de la marca de revisión HTML:
Por defecto, nuestra página web se mostraría con la imagen sobre el texto, ya que 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 por defecto. Cambiaremos esta apariencia por defecto girando a CSS. Primero, sin embargo, añadiremos un valor de clase a nuestro elemento de imagen. Esa clase actuará como un «gancho» que usaremos en nuestro CSS más tarde.
Nótese que esta clase de «izquierda» no hace nada por sí sola. Para que podamos lograr el estilo deseado, necesitamos usar CSS a continuación.
Estilos de CSS
Con nuestro HTML en su lugar (incluyendo nuestro atributo de clase «left») ahora podemos pasar a CSS. Agregaríamos una regla a nuestra hoja de estilo que haría flotar esa imagen y también agregaríamos un poco de relleno al lado de ella para que el texto que finalmente se envuelva alrededor de la imagen no se choque con ella demasiado cerca. Aquí está el CSS que puedes escribir:
.left {
float: izquierda;
acolchado: 0 20px 20px 0;
}
Este estilo hace flotar la imagen hacia la izquierda y agrega un poco de relleno (usando un poco de taquigrafía CSS) a la derecha e inferior de la imagen.
Si usted revisó la página que contiene este HTML en un navegador, la imagen ahora estaría alineada a la izquierda y el texto del párrafo aparecería a su derecha con una cantidad apropiada de espacio entre los dos. Note que el valor de la clase "left" que usamos es arbitrario. Podríamos haberlo llamado cualquier cosa porque el término "izquierda" no hace nada por sí solo. Cualquiera que sea el término que utilice debe tener un atributo de clase en el HTML que funcione con un estilo CSS real que dicte los cambios visuales que desea realizar.
Formas alternativas de lograr estos estilos
Este enfoque de dar al elemento de imagen un atributo de clase y luego usar un estilo CSS general que haga flotar el elemento es sólo una manera de lograr este aspecto de "imagen alineada a la izquierda". También puede quitar el valor de la clase de la imagen y darle estilo 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 "main-content".
DIFUNDE LA PALABRA- En este ejemplo, tenemos una imagen de una foto de la cabeza, por lo que este texto probablemente sea sobre la persona a la que va dirigida la foto.
Para cambiar el estilo de esta imagen, puedes escribir este CSS:
.main-content img {
float: izquierda;
acolchado: 0 20px 20px 0;
}
En este escenario, nuestra imagen estaría alineada a la izquierda, con el texto flotando alrededor como antes, pero no necesitábamos añadir un valor extra de clase 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.
Evite los estilos en línea
Por último, puede incluso añadir los estilos directamente en su marcación HTML, de esta manera:
Este método se llama "estilos en línea". No es aconsejable 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 ajusten el aspecto de su sitio según sea necesario para esas diferentes pantallas.
