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