¿Qué hace la regla CSS “clear: both”?

Te damos el arreglo a este dilema, o por lo menos eso deseamos. Si continuas con interrogantes dínoslo y sin tardar

Solución:

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

Mantendré esta respuesta simple y al grano, y le explicaré gráficamente por qué clear: both; se requiere o lo que hace …

Generalmente, los diseñadores hacen flotar los elementos, a la izquierda oa 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.

Código para demostración

/*  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;

    Header



    Content (Floated Left, Can Be Floated To Right As Well)

Nota:Puede que tengas que agregar header, footer, aside, section (y otros elementos HTML5) como display: block; en su hoja de estilo por mencionar explícitamente que los elementos son elementos de nivel 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.

No flotadores para header, luego viene el aside etiqueta que usaré para la barra lateral de mi sitio web, por lo que flotaré el elemento a la izquierda.

Nota: De forma predeterminada, el elemento de nivel de bloque ocupa el documento en un 100% de ancho, pero cuando se flota a la izquierda o la derecha, cambiará de tamaño de acuerdo con el contenido que contiene.

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

Entonces, como notas, la izquierda flotó div deja el espacio a su derecha sin usar, lo que permitirá div después para cambiar en el espacio restante.

1. div‘s se renderizarán uno tras otro si NO están flotando
2. div se moverán uno al lado del otro si flotan hacia la izquierda o hacia la derecha

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

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

Estoy usando una clase llamada .clear y tiene una propiedad llamada clear con un valor de both. Así que veamos por qué necesita both.

He flotado aside y section elementos a la izquierda, as que asuma un escenario, donde tenemos una piscina, donde header es tierra firme, aside y section están flotando en la piscina y el pie de página es tierra firme de nuevo, algo como esto ..

Entonces, el agua azul no tiene idea de cuál es el área de los elementos flotantes, pueden ser más grandes o más pequeños que la piscina, por lo 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 un PISCINA aquí y el PISCINA no tiene idea de cuántos objetos están flotando, o cuál es la longitud o el ancho 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 eliminados para estirar el color de fondo del contenedor

(Referir ^[Clearfix] sección de esta respuesta para una forma ordenada de hacer esto. Estoy usando un vacio div ejemplo intencionalmente con fines explicativos)

He proporcionado 3 ejemplos arriba, el primero es el flujo de documentos normal donde red background simplemente se renderizará como se esperaba ya que el contenedor no contiene ningún objeto flotante.

En el segundo ejemplo, cuando el objeto flota hacia la izquierda, el elemento contenedor (POOL) no conocerá las dimensiones de los elementos flotantes y, por lo tanto, no se estirará 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 utiliza 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 … Entonces flotarás 2 elementos a la izquierda y quieres el otro debajo de ellos.

1. div Flotando a la izquierda resultando en section moviéndose al espacio restante
2. Flotado div despejado para que el section la etiqueta se mostrará debajo del flotante divs

---

1er ejemplo

---

Segundo ejemplo

Por último, pero no menos importante, el footer La etiqueta se renderizará después de los elementos flotantes, ya que he usado la clear clase antes de declarar mi footer etiquetas, lo que garantiza que todos los elementos flotantes (izquierda / derecha) se borren hasta ese punto.

---

Clearfix

Llegando a clearfix que está relacionado con los flotadores. Como ya lo especificó @Elky, la forma en que estamos limpiando estos flotadores no es una forma limpia de hacerlo ya que estamos usando un vacío div elemento que no es un div El elemento está destinado. De ahí viene el clearfix.

Piense en ello como un elemento virtual que creará un elemento vacío antes de que finalice su elemento principal. Esto borrará automáticamente su elemento de envoltura que contiene elementos flotantes. Este elemento no existirá en su DOM literalmente pero hará el trabajo.

Para borrar automáticamente cualquier elemento de envoltura que tenga elementos flotantes, podemos usar

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

Nota la :after pseudo elemento usado 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 representa después del niño flotante div donde limpiamos los flotadores que no es más que equivalente a tener un vacío div elemento con clear: both; propiedad que estamos usando para esto también. Ahora por qué display: table; y content está 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 :after seudo.

---

Respuesta original:

La mayoría de los desarrolladores hacen flotar 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, lo hará. flotar también en el espacio restante, por lo que para evitar que clear: both; se utiliza, borra todos los elementos flotantes a izquierda o derecha.

Demostración:

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

Ahora, ¿qué pasa si quieres hacer que el otro div se renderice a continuación? div1, entonces usarás clear: both; por lo que se asegurará de borrar todos los flotadores, izquierdo o derecho

------------------
div1(Floated Left)
------------------

----------------------------------
Other div renders here now
----------------------------------

los clear La propiedad indica que el lado izquierdo, derecho o ambos lados de un elemento no pueden ser adyacentes a elementos flotantes anteriores dentro del mismo contexto de formato de bloque. Los elementos despejados 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;

float: left;
float: right;
clear: none;

clear: left; Elemento empujado debajo de 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;

float: left;
float: right;
clear: left;

clear: right; Elemento empujado debajo de elementos flotantes a la derecha

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;

float: left;
float: right;
clear: right;

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;

float: left;
float: right;
clear: both;

clear no afecta a los 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;

float: left;

  
display: inline-block;
  
float: left;
  
clear: both;

CSS flotante y claro

Violín de muestra

Solo intenta eliminar clear:both propiedad de la div con classsample y mira como sigue flotando divs.

Si estás contento con lo expuesto, tienes la libertad de dejar un enunciado acerca de qué le añadirías a este post.

---

---

Utiliza Nuestro Buscador