თვისება clear

თვისება clear აუქმებს ერთი ელემენტის მოუვლელობას სხვების მიერ, რომელიც განსაზღვრულია თვისებით float. შეუძლია მიიღოს შემდეგი მნიშვნელობები: none (აუქმებს საკუთარ თავს), both (აუქმებს float-ს ერთდროულად მარჯვნივ და მარცხნივ), left (აუქმებს float-ს მარცხნივ), right (აუქმებს float-ს მარჯვნივ).

სინტაქსი

სელექტორი {
	clear: none ან left ან right ან both
}

მაგალითი

მოდით, გავაუქმოთ სურათის მოუვლელობა ტექსტით მარცხნიდან:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
	</p>
</div>

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

მაგალითი

ახლა მოდით, გავაუქმოთ სურათის მოუვლელობა ტექსტით მარჯვნიდან:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
	</p>
</div>

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

მაგალითი

მოდით გავაუქმოთ თვისების clear მოქმედება:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
		ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
	</p>
</div>

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

იხილეთ აგრეთვე

თვისება bottom,
რომელიც ადგენს ელემენტის ქვედა კიდის პოზიციას
თვისება top,
რომელიც ადგენს ელემენტის ზედა კიდის პოზიციას
თვისება left,
რომელიც ადგენს ელემენტის მარცხენა კიდის პოზიციას
თვისება right,
რომელიც ადგენს ელემენტის მარჯვენა კიდის პოზიციას
ფსევდოელემენტი ::backdrop,
რომელიც ადგენს მდებარეობას პირველი ელემენტის შემდეგ
თვისება caption-side,
რომელიც ადგენს ცხრილის სათაურის პოზიციას