clear

This translation is incomplete. Please help translate this article from English

La propiedad CSS clear especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad clear aplica a ambos elementos flotantes y no flotantes.

Cuando es aplicado a bloques no flotantes, mueve el border edge del elemento hacia abajo hasta que este debajo del margin edge de todos los floats relevantes. Este movimiento (cuando acontece) causa que margin collapsing no ocurra.

Cuando se aplica a elementos flotantes, mueve el margin edge del elemento debajo del margin edge de todos los floats relevantes. Esto afecta la posición de floats posteriores, ya que estos no pueden ser posicionados más arriba que los primeros.

Los floats que son relevantes para ser limpiados (cleared) son los primeros floats dentro del mismo contexto de formato de bloque.

Nota: Si deseas que un elemento contenga todos los elementos flotantes dentro, puedes hacer dos cosas, o bien flotar el contenedor también o usar clear en un pseudo-element ::after.

#container::after { 
   content: "";
   display: block; 
   clear: both;
}
Valor inicialnone
Applies toblock-level elements
Heredableno
Valor calculadocomo se especifica
Animation typediscrete

Sintaxis

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

clear: inherit;

Valores

none
Es un keyword que indica que el elemento no es movido hacia abajo para limpiar elementos flotantes anteriores.
left
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la izquierda.
right
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la derecha.
both
Es un keyword que indica que el elemento es movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.
inline-start
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes al inicio del bloque contenedor, estos son los elementos con valor float left en scripts ltr (left to right) y elementos con valor float right en scripts rtl (right to left).
inline-end
Es un keyword que indica que el elemento es movido hacia abajo para limpiar floats al final del bloque contenedor, estos son los elementos con valor float right en scripts ltr (left to right) y elementos con valor float left en scripts rtl (right to left).

Sintaxis formal

none | left | right | both | inline-start | inline-end

Ejemplo

Nota: El div con clase 'wrapper' añade un borde para una mejor visibilidad de la utilidad de la propiedad clear

clear: left

Contenido HTML

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="left">This paragraph clears left.</p>

</div>

Contenido CSS

.wrapper{
    border:1px solid black;
    padding:10px;
}
.left {
    border: 1px solid black;
    clear: left;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width: 20%;
}
.red {
    float: left;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

clear: right

Contenido HTML

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="right">This paragraph clears right.</p>

</div>

Contenido CSS

.wrapper{
    border:1px solid black;
    padding:10px;
}
.right {
    border: 1px solid black;
    clear: right;
}
.black {
    float: right;
    margin: 0;
    background-color: black;
    color: #fff;
    width:20%;
}
.red {
    float: right;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

clear: both

Contenido HTML

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="both">This paragraph clears both.</p>

</div>

Contenido CSS

.wrapper{
    border:1px solid black;
    padding:10px;
}
.both {
    border: 1px solid black;
    clear: both;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width:20%;
}
.red {
    float: right;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 45%;
}

Especificaciones

Specification Status Comment
CSS Logical Properties and Values Level 1
La definición de 'float and clear' en esta especificación.
Editor's Draft Agrega los valores inline-start y inline-end
CSS Level 2 (Revision 1)
La definición de 'clear' en esta especificación.
Recommendation Sin cambios significativos, aunque se aclaran los detalles.
CSS Level 1
La definición de 'clear' en esta especificación.
Recommendation Definición inicial

Compatibilidad del navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
clearChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 4Opera Soporte completo 3.5Safari Soporte completo 1WebView Android Soporte completo 1Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0
Flow-relative values inline-start and inline-endChrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 55IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 55Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte

También puedes ver