CSS-ში clear თვისების გამოყენებით მიმდინარეობის გაუქმება

ასეთი პრობლემის გადასაჭრელად არსებობს სპეციალური თვისება clear, რომელიც უქმდება მიმდინარეობას. მნიშვნელობა left უქმდება მიმდინარეობას მარცხნიდან, მნიშვნელობა right - მარჯვნიდან, ხოლო მნიშვნელობა both - ორივე მხრიდან. ეს მნიშვნელობა გამოიყენება ყველაზე ხშირად.

ამიტომ, თვისება clear უქმდება მიმდინარეობას. ჩვენს შემთხვევაში, ეს მოგვცემს საშუალებას გავაკეთოთ ისე, რომ პირველი დივის მცურავი სურათი არ გადავიდეს მეორე დივზე.

ამ შემთხვევაში clear უნდა მივანიჭოთ იმ ელემენტს, რომელზეც მცურავი ელემენტები არ უნდა გადავიდნენ, ანუ ჩვენს შემთხვევაში ის უნდა მივანიჭოთ მეორე დივს.

მოდით გავაკეთოთ ეს - მივანიჭოთ მეორე დივს კლას parent-თან ერთად ასევე კლასი clearfix და ამ ახალი კლასისთვის დავაყენოთ თვისება clear მნიშვნელობაში both - სურათის გადახურვა გაქრება:

<div class="parent">
	<img src="img.png" alt="">
	ტექსტი
</div>
<div class="parent clearfix">
	ტექსტი
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}

სახელწოდება clearfix საყოველთაოდ მიღებულია, ამიტომ შემდგომში გამოიყენეთ სწორედ ის.