Disposición de CSS - flotación y limpiar

Disposición de CSS - flotación y limpiar

CSS float El atributo especifica cómo debe flotar el elemento.

CSS clear El atributo especifica qué elementos pueden flotar junto a un elemento de eliminación y en qué lado.

Atributo float

float La propiedad se utiliza para posicionar y formatear el contenido, por ejemplo, para que la imagen flote a la izquierda hacia el texto dentro del contenedor.

float La propiedad puede establecer uno de los siguientes valores:

  • left - El elemento se flotará a la izquierda de su contenedor
  • right - El elemento se flotará a la derecha de su contenedor
  • none - El elemento no se flotará (se mostrará en la posición donde aparece el texto). Valor predeterminado.
  • inherit - El elemento hereda el valor de float de su padre

La forma más simple de usarlo es:float La propiedad puede lograr efectos de envoltura de texto alrededor de la imagen (como en los periódicos).

Ejemplo - float: right;

El siguiente ejemplo especifica que la imagen debe flotar a la derecha en el texto:

Piña

Tutoriales de tecnologías web líderes - todos gratis. En CodeW3C.com, puedes encontrar todos los tutoriales de construcción de sitios web que necesites. Desde HTML básico hasta CSS, pasando por XML, SQL, JS, PHP.

Nuestra guía de referencia cubre todos los aspectos de las tecnologías del sitio web. Incluye tecnologías estándar de W3C: HTML, CSS, XML. Y otras tecnologías, como JavaScript, PHP, SQL.

En CodeW3C.com, proporcionamos miles de ejemplos. Al usar nuestro editor en línea, puedes editar estos ejemplos y experimentar con el código.

Ejemplo

img {
  float: right;
}

Prueba personalmente

Ejemplo - float: left;

El siguiente ejemplo especifica que la imagen debe estar en el textoA la izquierdaFlotar:

Piña

Tutoriales de tecnologías web líderes - todos gratis. En CodeW3C.com, puedes encontrar todos los tutoriales de construcción de sitios web que necesites. Desde HTML básico hasta CSS, pasando por XML, SQL, JS, PHP.

Nuestra guía de referencia cubre todos los aspectos de las tecnologías del sitio web. Incluye tecnologías estándar de W3C: HTML, CSS, XML. Y otras tecnologías, como JavaScript, PHP, SQL.

En CodeW3C.com, proporcionamos miles de ejemplos. Al usar nuestro editor en línea, puedes editar estos ejemplos y experimentar con el código.

Ejemplo

img {
  float: left;
}

Prueba personalmente

Ejemplo - No float

En el siguiente ejemplo, la imagen se mostrará en la posición donde aparece el texto (float: none;):

Piña Tutoriales de tecnologías web líderes - todos gratis. En CodeW3C.com, puedes encontrar todos los tutoriales de construcción de sitios web que necesites. Desde HTML básico hasta CSS, pasando por XML, SQL, JS, PHP. Nuestra guía de referencia cubre todos los aspectos de las tecnologías del sitio web. Incluye tecnologías estándar de W3C: HTML, CSS, XML. Y otras tecnologías, como JavaScript, PHP, SQL. En CodeW3C.com, proporcionamos miles de ejemplos. Al usar nuestro editor en línea, puedes editar estos ejemplos y experimentar con el código.

Ejemplo

img {
  float: none;
}

Prueba personalmente

Lectura adicional

Libro complementario:Flotación CSS