¿Qué hace la regla CSS "claro: ambos" hacer?


293

¿Qué hace la siguiente regla CSS:

.clear { clear: both; }

¿Y por qué necesitamos usarlo?


22
Cuando usa CSS floaty desea el siguiente elemento a continuación, no a la derecha ni a la izquierda.
Riz

No se permiten elementos flotantes en el lado izquierdo y derecho de un elemento especificado cuando el elemento se usa con clear: ambos
JackXu

Respuestas:


687

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 ...

ingrese la descripción de la imagen aquí

Ejemplo en vivo de la imagen de demostración.

Code For Demo

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í ...

Vista flotante

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.

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí


2do ejemplo

ingrese la descripción de la imagen aquí

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.

Clearfix

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
----------------------------------

3
Si nunca ha oído hablar de flotadores, le sugiero que primero lea una introducción a los flotadores --- por ejemplo, vea el enlace en la siguiente respuesta. Luego regrese y lea esta respuesta, tendrá sentido.
osa

37
Tenga en cuenta que los flotadores no se inventaron originalmente para tener dos elementos de nivel de bloque uno al lado del otro, ¡ese es simplemente el efecto secundario! El propósito original era permitir que el texto fluyera alrededor de las imágenes en línea, para que las imágenes flotaran en cualquier dirección.
El fantasma de Madara

3
Respuesta corta relacionada para referirse antes de leer esto, solo para tener una idea general ... stackoverflow.com/questions/16568272/…
Mr. Alien

@ mr-alien Buen ejemplo, sin embargo, en el caso de jsfiddle.net/N82UD/1 cuando encoge la pantalla, hay un problema con flotación y el elemento "borrado" no sigue el flujo: jsfiddle.net/N82UD/138 It toma el espacio del elemento flotante 2
Omar

1
@Carlo: una alternativa que se usa mucho en plantillas como Twitter Bootstrap, por ejemplo; es poner display: inline-blockun elemento, y en el padre que puede usar text-align: left, text-align: centero text-align: rightpor ejemplo.
Daan

39

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.

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

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

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

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


1
Excelente. Esta es la mejor respuesta. Me pregunto por qué otra respuesta fue aceptada.
Sawa

¿Qué sucederá si eliminamos la display: inline-block;propiedad css de este escenario? Estirará el inline-blockelemento padre a su elemento hermano que tiene clase float-left. Lo que hace que la declaración "clear no afecte flotantes fuera del contexto de formato de bloque actual" es incorrecta. ¿Podría alguien explicar por favor?
Sashrika Waidyarathna

@SashrikaWaidyarathna: un elemento padre no necesariamente genera un contexto de formato de bloque para sus hijos. En su ejemplo (a) eliminar display: inline-blocksignifica que ya no genera un contexto de formato de bloque (b) los flotantes / borrados dentro de ese elemento y el primer flotante se vuelven parte del mismo contexto de formato de bloque (la ventana gráfica).
Salman A

@SalmanA, gracias por la explicación que hace referencia a la especificación CSS. No conocía la definición del contexto de formato de bloque.
Sashrika Waidyarathna

2
Sundar Pichai doppelganger?
Manoj Kumar


13

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.


Esta otra publicación tiene más detalles sobre clearfix: stackoverflow.com/questions/211383/…
Bill Hoag

2

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:


3
Que tutorial?
Peter Mortensen
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.