Flotación de CSS

Los cuadros flotantes pueden moverse a la izquierda o a la derecha hasta que su borde externo toque el borde del contenedor o de otro contenedor flotante.

Dado que el contenedor flotante no está en el flujo normal del documento, los cuadros de bloque en el flujo normal del documento actúan como si el contenedor flotante no existiera.

Flotación de CSS

Vea la siguiente imagen, cuando el cuadro 1 se desplaza hacia la derecha, se desplaza hacia la derecha y sale del flujo del documento, hasta que su borde derecho toque el borde derecho del contenedor:

Ejemplo de flotación CSS - Elemento flotante a la derecha

Vea la siguiente imagen, cuando el cuadro 1 se desplaza hacia la izquierda, se desplaza hacia la izquierda y sale del flujo del documento, hasta que su borde izquierdo toque el borde izquierdo del contenedor. Ya que ya no está en el flujo del documento, no ocupa espacio, de hecho, cubre el cuadro 2, haciendo que el cuadro 2 desaparezca de la vista.

Si se mueven todos los tres cuadros hacia la izquierda, el cuadro 1 se desplaza hacia la izquierda hasta que toque el contenedor, y los otros dos cuadros se desplazan hacia la izquierda hasta que toquen al cuadro flotante anterior.

Ejemplo de flotación CSS - Elemento flotante a la izquierda

Como se muestra en la siguiente imagen, si el contenedor es demasiado estrecho para contener tres elementos flotantes alineados horizontalmente, los otros bloques flotantes se mueven hacia abajo hasta que haya suficiente espacio. Si los elementos flotantes tienen alturas diferentes, pueden ser 'bloqueados' por otros elementos flotantes cuando se mueven hacia abajo:

Ejemplo de flotación CSS 2 - Elemento flotante a la izquierda

Propiedad float de CSS

En CSS, realizamos el flotamiento de elementos a través de la propiedad float.

Para obtener más información sobre la propiedad float, consulte el manual de referencia:Propiedad float de CSS。

Contenedor de línea y limpieza

El contenedor de línea al lado del contenedor flotante se acorta, dejando espacio para el contenedor flotante, y el contenedor de línea se enmarca alrededor del contenedor flotante.

Por lo tanto, crear un contenedor flotante permite que el texto se enmarque alrededor de la imagen:

La línea de cuadro rodea el cuadro flotante

Para evitar que el contenedor de línea se enmarque alrededor del contenedor flotante, es necesario aplicar al cuadro Atributo clear. El valor de la propiedad clear puede ser left, right, both o none, lo que indica qué lados del cuadro no deben estar cerca de la caja flotante.

Para lograr este efecto, en el elemento que se limpiará,Margen superior externoAñadir suficiente espacio para que el borde superior del elemento descienda verticalmente debajo de la caja flotante:

Ejemplo de propiedad clear - Aplicación de clear a la línea de cuadro

Esta es una herramienta útil que permite que los elementos circundantes dejen espacio para el elemento flotante.

Veamos más detalladamente el flotamiento y la limpieza. Supongamos que deseamos que una imagen flote a la izquierda de un bloque de texto y que esta imagen y el texto estén contenidos en otro elemento con color de fondo y borde. Puede escribir el siguiente código:

.news {
  background-color: gris;
  border: solid 1px negro;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>algún texto</p>
</div>

En este caso, se ha producido un problema. Porque el elemento flotante se ha desplazado del flujo del documento, el div que rodea la imagen y el texto no ocupa espacio.

¿Cómo hacer que el elemento envolvente rodee visualmente al elemento flotante? Es necesario aplicar clear en alguna parte de este elemento:

Ejemplo de propiedad clear - Aplicación de limpieza a un elemento vacío

Desafortunadamente, se ha producido un nuevo problema, ya que no hay elementos existentes que puedan aplicarse para la limpieza, por lo que solo podemos agregar un elemento vacío y limpiarlo.

.news {
  background-color: gris;
  border: solid 1px negro;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>algún texto</p>
<div class="clear"></div>
</div>

Esto logrará el efecto que deseamos, pero necesitará agregar código adicional. A menudo, hay elementos que pueden aplicar clear, pero a veces es necesario agregar etiquetas inútiles para el diseño.

Sin embargo, tenemos otra manera, es flotar el contenedor div:

.news {
  background-color: gris;
  border: solid 1px negro;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>algún texto</p>
</div>

De esta manera, obtendremos el efecto que deseamos. Desafortunadamente, el siguiente elemento se verá afectado por este elemento flotante. Para resolver este problema, algunas personas eligen flotar todo el diseño y luego limpiar estos flotantes con elementos significativos adecuados (a menudo, el pie de página del sitio). Esto ayuda a reducir o eliminar etiquetas innecesarias.

De hecho, todos los sitios en CodeW3C.com utilizan esta técnica. Si abre el archivo CSS que usamos, verá que hemos limpiado el div del pie de página, y los tres divs superiores se flotan a la izquierda.

Propiedad clear de CSS

Acabamos de discutir en detalle el principio de funcionamiento de la limpieza de CSS y la aplicación del atributo clear. Si desea aprender más sobre el atributo clear, visite el manual de referencia:Propiedad clear de CSS。

Ejemplo de flotación y limpieza

Aplicación simple de la propiedad float
Hacer que la imagen flote a la derecha de un párrafo
Flotar la imagen con borde y frontera a la derecha del párrafo
Hacer que la imagen flote a la derecha del párrafo. Agregue un borde y una frontera a la imagen.
La imagen con título flota a la derecha
Hacer que la imagen con título flote a la derecha
Hacer que la inicial de un párrafo flote a la izquierda
Hacer que la inicial de un párrafo flote a la izquierda y agregarle estilo a esta letra.
Crear un menú horizontal
Cree un menú horizontal usando flotación con enlaces de una columna.
Crear una página principal sin tabla
Use la flotación para crear una página principal con encabezado, pie de página, índice lateral y contenido principal.
Limpieza del lado del elemento
Este ejemplo muestra cómo usar elementos flotantes laterales para limpiar.