Savybė clear

Savybė clear atšaukia suplyšiojimą vieno elemento kitais, nurodytą savybe float. Gali priimti šias reikšmes: none (atšaukia paties savęs veikimą), both (atšaukia float vienu metu ir iš dešinės, ir iš kairės), left (atšaukia float iš kairės), right (atšaukia float iš dešinės).

Sintaksė

selektorius {
	clear: none arba left arba right arba both
}

Pavyzdys

Atšaukime paveikslėlio supyliojimą tekstu iš kairės:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

Pavyzdys

Dabar atšaukime paveikslėlio supyliojimą tekstu iš dešinės:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

Pavyzdys

Atšaukime paties savybės clear veikimą:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
		tekstas tekstas tekstas tekstas tekstas tekstas
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

Taip pat žiūrėkite

savybė bottom,
kuri nurodo apatinio elemento krašto poziciją
savybė top,
kuri nurodo viršutinio elemento krašto poziciją
savybė left,
kuri nurodo kairiojo elemento krašto poziciją
savybė right,
kuri nurodo dešiniojo elemento krašto poziciją
pseudoelementas ::backdrop,
kuris nurodo išdėstymą po pirmojo elemento
savybė caption-side,
kuri nurodo lentelės antraštės poziciją