¿Qué hace la siguiente regla CSS:

.clear { clear: both; }

¿Y por qué necesitamos usarlo?

No explicaré cómo funcionan los flotadores aquí (en detalle), ya que esta pregunta generalmente se centra en ¿Por qué usar clear: both;O qué hace clear: both;exactamente ...

Mantendré esta respuesta simple y directa, y te explicaré gráficamente por qué clear: both;es necesario o qué hace ...

En general, los diseñadores flotan los elementos, hacia la izquierda o hacia la derecha, lo que crea un espacio vacío en el otro lado que permite que otros elementos ocupen el espacio restante.

¿Por qué flotan elementos?

Los elementos flotan cuando el diseñador necesita 2 elementos de nivel de bloque uno al lado del otro. Por ejemplo, digamos que queremos diseñar un sitio web básico que tenga un diseño como el siguiente ...

Ejemplo en vivo de la imagen de demostración.

Code For Demo

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Nota: Es posible que tenga que añadir header, footer, aside, section(y otros elementos de HTML5) como display: block;en la hoja de estilos para mencionar explícitamente que los elementos son elementos de bloque.

Explicación:

Tengo un diseño básico, 1 encabezado, 1 barra lateral, 1 área de contenido y 1 pie de página.

Sin flotantes header, luego viene la asideetiqueta que usaré para la barra lateral de mi sitio web, por lo que flotaré el elemento a la izquierda.

Nota: Por defecto, el elemento de nivel de bloque ocupa el documento con un ancho del 100%, pero cuando se flota hacia la izquierda o hacia la derecha, cambiará de tamaño según el contenido que contenga.

1. Comportamiento normal del elemento de nivel de bloque
2. Comportamiento flotante del elemento de nivel de bloque

Entonces, como observa, la izquierda flotante divdeja el espacio a su derecha sin usar, lo que permitirá divque el espacio posterior se desplace en el espacio restante.

1. div's renderizarán uno tras otro si NO están flotando
2. div cambiará uno al lado del otro si flota a la izquierda o derecha

Ok, así es como se comportan los elementos de nivel de bloque cuando se flotan hacia la izquierda o hacia la derecha, entonces, ¿por qué se clear: both;requiere y por qué?

Entonces, si observa en la demostración de diseño, en caso de que lo haya olvidado, aquí está ...

Estoy usando una clase llamada .cleary contiene una propiedad llamada clearcon un valor de both. Entonces, veamos por qué lo necesita both.

He flotado asidey sectionelementos a la izquierda, así que supongamos un escenario, donde tenemos una piscina, donde headerhay tierra sólida, asidey sectionestamos flotando en la piscina y el pie de página es tierra sólida nuevamente, algo así ...

Entonces, el agua azul no tiene idea de cuál es el área de los elementos flotantes, pueden ser más grandes que la piscina o más pequeños, así que aquí surge un problema común que preocupa al 90% de los principiantes de CSS: por qué el fondo de un elemento contenedor no se estira cuando contiene elementos flotantes. Es porque el elemento contenedor es una PISCINA aquí y la PISCINA no tiene idea de cuántos objetos están flotando, o cuál es la longitud o amplitud de los elementos flotantes, por lo que simplemente no se estirará.

1. Flujo normal del documento
2. Secciones flotadas a la izquierda
3. Elementos flotantes despejados para estirar el color de fondo del contenedor

(Consulte la sección ^[Clearfix] de esta respuesta para obtener una forma clara de hacerlo. Estoy usando un divejemplo vacío intencionalmente para fines de explicación)

He proporcionado 3 ejemplos anteriores, el primero es el flujo de documentos normal donde el redfondo solo se procesará como se esperaba ya que el contenedor no contiene ningún objeto flotante.

En el segundo ejemplo, cuando el objeto se flota hacia la izquierda, el elemento contenedor (POOL) no conocerá las dimensiones de los elementos flotantes y, por lo tanto, no se extenderá hasta la altura de los elementos flotantes.

Después de usar clear: both;, el elemento contenedor se estirará a sus dimensiones de elemento flotante.

Otra razón por la que clear: both;se usa es para evitar que el elemento se mueva hacia arriba en el espacio restante.

Digamos que quieres 2 elementos uno al lado del otro y otro elemento debajo de ellos ... Así que flotarás 2 elementos a la izquierda y quieres el otro debajo de ellos.

1. divFlotó a la izquierda, lo que resultó en sectionmoverse al espacio restante
2. Flotante divborrado para que la sectionetiqueta se muestre debajo del divs flotante

1er ejemplo

2do ejemplo

Por último, pero no menos importante, la footeretiqueta se representará después de los elementos flotantes, ya que he usado la clearclase antes de declarar mis footeretiquetas, lo que garantiza que todos los elementos flotantes (izquierda / derecha) se borren hasta ese punto.

Clearfix

Llegando a clearfix que está relacionado con flotadores. Como ya lo especificó @Elky , la forma en que estamos limpiando estos flotadores no es una forma limpia de hacerlo, ya que estamos utilizando un divelemento vacío que no es un divelemento para el que está destinado. Por lo tanto, aquí viene el clearfix.

Piense en ello como un elemento virtual que creará un elemento vacío para usted antes de que termine su elemento padre. Esto eliminará automáticamente su elemento envoltorio que contenga elementos flotantes. Este elemento no existirá en su DOM literalmente, pero hará el trabajo.

Para auto limpiar cualquier elemento envoltorio que tenga elementos flotantes, podemos usar

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Tenga en cuenta el :afterpseudo elemento utilizado por mí para eso class. Eso creará un elemento virtual para el elemento contenedor justo antes de que se cierre. Si miramos en el dom, puede ver cómo se muestra en el árbol de documentos.

Entonces, si ve, se muestra después del elemento flotante divdonde limpiamos los elementos flotantes, que no es más que equivalente a tener un divelemento vacío con clear: both;propiedad que también estamos utilizando para esto. Ahora, por qué display: table;y contentestá fuera de este alcance de respuestas, pero puede obtener más información sobre el pseudo elemento aquí .

Tenga en cuenta que esto también funcionará en IE8 ya que IE8 admite :afterpseudo .

Respuesta original

La mayoría de los desarrolladores flotan su contenido hacia la izquierda o hacia la derecha en sus páginas, probablemente divs con logotipo, barra lateral, contenido, etc., estos divs flotan hacia la izquierda o hacia la derecha, dejando el resto del espacio sin usar y, por lo tanto, si coloca otros contenedores, flota también en el espacio restante, por lo que para evitar que clear: both;se use, borra todos los elementos flotantes hacia la izquierda o hacia la derecha.

Demostración:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

Ahora lo que si desea hacer que el otro div render a continuación div1, por lo que vamos a usar clear: both;lo que se asegurará de que se borre todos los flotadores, izquierda o derecha

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

La clearpropiedad indica que los lados izquierdo, derecho o ambos de un elemento no pueden ser adyacentes a elementos flotantes anteriores dentro del mismo contexto de formato de bloque. Los elementos eliminados se empujan debajo de los elementos flotantes correspondientes. Ejemplos:

clear: none; El elemento permanece adyacente a los elementos flotantes.

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; Elemento empujado debajo de los elementos flotantes izquierdos

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; Elemento empujado debajo de los elementos flotantes derechos

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; Elemento empujado debajo de todos los elementos flotantes

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear no afecta flotantes fuera del contexto de formato de bloque actual

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS flotante y claro

Violín de la muestra

Simplemente intente eliminar la clear:bothpropiedad de divwith class sampley vea cómo sigue flotando divs.

La respuesta del Sr. Alien es perfecta, pero de todos modos no recomiendo usarla <div class="clear"></div>porque es solo un truco que ensucia su marcado. Esto es inútil vacío diven términos de mala estructura y semántica, esto también hace que su código no sea flexible. En algunos navegadores, este div provoca una altura adicional y hay que agregarlo, lo height: 0;que es aún peor. Pero los problemas reales comienzan cuando desea agregar fondo o borde alrededor de sus elementos flotantes; simplemente colapsará porque la web se diseñó mal . Recomiendo envolver elementos flotantes en un contenedor que tenga la regla CSS clearfix . También es un hack, pero hermoso, más flexible de usar y legible para robots humanos y SEO.

Cuando desea que un elemento se coloque en la parte inferior del otro elemento, use este código en CSS. Se usa para flotadores.

Si flota contenido, puede flotar hacia la izquierda o hacia la derecha ... por lo que en un diseño común puede tener un navegador izquierdo, un div de contenido y un pie de página.

Para asegurarse de que el pie de página se mantenga por debajo de estos dos flotadores (si ha flotado a la izquierda y a la derecha), coloque el pie de página como clear: both.

De esta manera se mantendrá por debajo de ambas carrozas.

(Si solo está despejando a la izquierda, entonces realmente solo necesita hacerlo clear: left;).

Ve a través de este tutorial: