css - right - float html para que sirve

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

Question

¿Qué hace la siguiente regla CSS?

.clear { clear: both; }

¿Y por qué necesitamos usarlo?

Answer 1

Cuando desee colocar un elemento en la parte inferior, utilice este código en CSS. Se utiliza para flotadores.

Si flota contenido, puede flotar hacia la izquierda o hacia la derecha ... así que en un diseño común puede tener una barra de navegación a la izquierda, 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 ambos flotadores.

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

Ir a través de este tutorial:

Answer 2

La propiedad clear indica que la izquierda, la derecha o ambos lados de un elemento no pueden estar 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 flotados.

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 flotados a la izquierda

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 elementos flotados 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;
}

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

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

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

Answer 3

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

Answer 4

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

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

En general, los diseñadores hacen flotar 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 los 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 vivo de la imagen de demostración.

Código de 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;
}

<!-- 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 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 hay flotadores para el header , luego viene la etiqueta aside que usaré para la barra lateral de mi sitio web, así que estaré flotando el elemento hacia la izquierda.

Nota: De forma predeterminada, el elemento de nivel de bloque ocupa el ancho del documento al 100%, pero cuando se flota hacia la izquierda o hacia la derecha, se redimensionará de acuerdo con el contenido que contiene.

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

De modo que, como se observa, el div flotado a la izquierda deja el espacio a su derecha sin usar, lo que permitirá que el div después de él se desplace en el espacio restante.

1. div ''s se renderizarán uno tras otro si NO están flotando
2. div se desplazará uno al lado del otro si flota 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 está clear: both; por qué clear: both; requerido y por qué?

Así que si nota 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 vamos a ver por qué necesita both .

He flotado a aside y los elementos de la section a la izquierda, así que supongamos un escenario, donde tenemos un grupo, donde el header es tierra firme, al aside y la section están flotando en el grupo y el pie de página es tierra firme nuevamente, algo como esto ...

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

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

(Refiérase a la sección ^[Clearfix] de esta respuesta para obtener una forma clara de hacer esto. Estoy usando un ejemplo de div vacío intencionalmente para propósitos de explicación)

He proporcionado los 3 ejemplos anteriores, primero es el flujo normal de documentos en red fondo red solo se procesará como se espera ya que el contenedor no contiene ningún objeto flotante.

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

Después de usar clear: both; , el elemento contenedor se estirará a las dimensiones de su elemento flotado.

Otra razón la clear: both; Se utiliza para evitar que el elemento se desplace hacia arriba en el espacio restante.

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

1. div Flotó a la izquierda dando como resultado una section moviéndose hacia el espacio restante
2. El div flotado se borró para que la etiqueta de la section se muestre debajo de los div flotados

1er ejemplo

2do ejemplo

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

Clearfix

Viniendo a clearfix que está relacionado con flotadores. Como ya lo especificó @Elky , la forma en que estamos eliminando estos flotadores no es una forma limpia de hacerlo, ya que estamos utilizando un elemento div vacío que no es un elemento div . De aquí viene el clearfix.

Piense en ello como un elemento virtual que creará un elemento vacío para usted antes de que finalice su elemento primario. Esto limpiará por sí mismo su elemento de envoltura que contiene elementos flotantes. Este elemento no existirá en su DOM literalmente, pero hará el trabajo.

Para limpiar por sí mismo cualquier elemento de envoltorio que tenga elementos flotantes, podemos usar

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

Note el :after pseudo elemento usado por mi para esa class . Eso creará un elemento virtual para el elemento envoltorio justo antes de que se cierre. Si miramos en el dom, podemos ver cómo se muestra en el árbol de documentos.

Por lo tanto, si ve, se procesa después del div flotante secundario donde borramos los flotadores, que no es más que equivalente a tener un elemento div vacío con clear: both; propiedad que estamos utilizando para esto también. Ahora por qué display: table; y el content está fuera de este ámbito de respuestas, pero puede aprender más sobre el pseudoelemento aquí .

Tenga en cuenta que esto también funcionará en IE8 como IE8 admite :after pseudo .

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 el logotipo, la barra lateral, el 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, así que para evitar que clear: both; Se utiliza, borra todos los elementos flotados a la izquierda o derecha.

Demostración:

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

Ahora, ¿qué div1 si quieres hacer que la otra div1 div se div1 debajo de div1 , así que div1 clear: both; por lo que se asegurará de despejar 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
----------------------------------

Answer 5

CSS flotante y claro

Violín de muestra

Solo intente eliminar clear:both propiedades de la div con sample class y ver cómo sigue divs flotantes.