Propiedad clear
La propiedad clear cancela
la fluencia de un elemento por otros,
definida por la propiedad float.
Puede tomar los siguientes valores:
none (cancela su propia acción),
both (cancela float simultáneamente a derecha e izquierda),
left (cancela float a la izquierda), right (cancela
float a la derecha).
Sintaxis
selector {
clear: none o left o right o both
}
Ejemplo
Cancelemos la fluencia de la imagen por el texto a la izquierda:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: left;
padding-right: 10px;
}
.txt {
clear: left;
}
:
Ejemplo
Ahora cancelemos la fluencia de la imagen por el texto a la derecha:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: right;
}
:
Ejemplo
Cancelemos la acción de la propia
propiedad clear:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: none;
}
:
Véase también
-
propiedad
bottom,
que define la posición del borde inferior del elemento -
propiedad
top,
que define la posición del borde superior del elemento -
propiedad
left,
que define la posición del borde izquierdo del elemento -
propiedad
right,
que define la posición del borde derecho del elemento -
pseudoelemento
::backdrop,
que define la ubicación después del primer elemento -
propiedad
caption-side,
que define la posición del título de la tabla