
La propiedad clear
en CSS determina si un elemento puede estar junto a elementos flotantes junto a él o si debe moverse hacia abajo (este verbo se llama claro). Esta propiedad se puede aplicar a elementos float y no float.
Funciones css clear
Valor inicial | none |
---|---|
Aplicado a | Elementos a nivel de bloque. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó. |
/ * palabras reservadas * / clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; / * valores globales * / clear: inherit; clear: initial; clear: unset;
Cuando esta propiedad se aplica a elementos no float, moverá el borde del marco del elemento hacia abajo por debajo del borde de los márgenes de todos los elementos flotantes asociados, y este movimiento (cuando ocurra) no dará como resultado el colapso de los márgenes.
Cuando esta propiedad se aplica a elementos float, moverá el borde de los márgenes del elemento para que sea más bajo que el borde de los márgenes de todos los elementos flotantes asociados, y esto afecta la posición de los elementos flotantes que siguen a este elemento, porque los elementos flotantes posteriores no puede ser más alto que los que les preceden.
Los elementos flotantes enlazados son los elementos flotantes que están en el mismo bloque de coordinación.
Nota: Si un elemento contiene sólo elementos flotantes, su altura se colapsa y su valor se convierte en cero. El método para hacerlo es usar la propiedad clear
en el pseudo elemento (pseudo elemento) etiquetado ::after
.
#container::after { content: ""; display: block; clear: both; }
Ejemplos
Un ejemplo de uso de un valor left
con un atributo clear
.
Código HTML:
< div class = "wrapper" > < p class = "black" > CSS 1 2 3 4 5 </ p > < p class = "red" > CSS 1 2 3 4 5 </ p > < p class = "left" > clears left </ p > </ div >
Código CSS:
.wrapper { border: 1px solid black; padding: 10px; background-color: #f8f9fa; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: darkslategrey; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: salmon; width: 20%; } p { width: 50%; padding: 0.5em; }
Un ejemplo de uso del valor right
con la propiedad clear
:
< div class = "wrapper" > < p class = "black" > CSS 1 2 3 4 5 </ p > < p class = "red" > CSS 1 2 3 4 5 </ p > < p class = "right" > clears right </ p > </ div >
Código CSS:
.wrapper { border: 1px solid black; padding: 10px; background-color: #f8f9fa; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: darkslategrey; color: #fff; width: 20%; } .red { float: right; margin: 0; background-color: salmon; width: 20%; } p { width: 50%; padding: 0.5em; }
Un ejemplo de uso del valor both
con la propiedad clear
:
< div class = "wrapper" > < p class = "black" > CSS 1 2 3 4 5</ p > < p class = "red" > CSS 1 2 3 4 5 </ p > < p class = "both" >clears both </ p > </ div >
Código CSS:
.wrapper { border: 1px solid black; padding: 10px; background-color: #f8f9fa; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-color: darkslategrey; color: #fff; width: 20%; } .red { float: right; margin: 0; background-color: salmon; width: 20%; } p { width: 50%; padding: 0.5em; }
Soporte de navegadores
Chrome | Firefox | EI | Ópera | Safari |
---|---|---|---|---|
1.0 | 1.0 | 4.0 | 3,5 | 1.0 |
Estructura general
none
Una palabra reservada indica que el elemento no se moverá hacia abajo para borrar los elementos flotantes anteriores.
left
Una palabra reservada indica que el elemento no se moverá hacia abajo para borrar los elementos flotantes anteriores a la izquierda.
right
Una palabra reservada indica que el elemento no se moverá hacia abajo para borrar los elementos flotantes anteriores a la derecha.
both
Una palabra reservada indica que el elemento no se moverá hacia abajo para borrar los elementos flotantes anteriores a la izquierda y a la derecha.
Estructura formal
clear: none | left | right | both | inline-start | inline-end;
La página de propiedades display
que especifica qué tipo de cuadro de visualización se utilizará con el elemento. La página de propiedades float
que especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece.
- Característica Box Sizing en CSS
- Característica del Margin en CSS
- Diferencias entre SASS y SCSS
- Característica del Padding en CSS
- Característica de Opacity en CSS
- Característica del Overflow en CSS
- Característica del Color en el CSS
- Característica del Background en CSS
- Característica de Border en CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Características padding en CSS
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Propiedad clear en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Propiedades float en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica background-position en CSS
- Característica box-shadow en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Características border-image-width en CSS
- Características border-left en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Características border-right-color en CSS