Egenskapen clear

Egenskapen clear avbryter omslutning av ett element av andra, som definierats av egenskapen float. Kan ta följande värden: none (avbryter sin egen funktion), both (avbryter float samtidigt till höger och vänster), left (avbryter float till vänster), right (avbryter float till höger).

Syntax

selektor {
	clear: none eller left eller right eller both
}

Exempel

Låt oss avbryta omslutningen av bilden med text till vänster:

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

Exempel

Nu låter oss avbryta omslutningen av bilden med text till höger:

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

Exempel

Låt oss avbryta funktionen av själva egenskapen 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;
}

Se även

egenskapen bottom,
som anger positionen för elementets nedre kant
egenskapen top,
som anger positionen för elementets övre kant
egenskapen left,
som anger positionen för elementets vänstra kant
egenskapen right,
som anger positionen för elementets högra kant
pseudoelementet ::backdrop,
som anger placering efter det första elementet
egenskapen caption-side,
som anger positionen för tabellrubriken