CSS-da clear xususiyati yordamida oqimni bekor qilish

Bunday muammoni hal qilish uchun maxsus clear xususiyati mavjud bo'lib, u oqimni bekor qiladi. left qiymati chap tomondan oqimni bekor qiladi, right qiymati - o'ngdan, va both qiymati - ikkala tomondan. Bu qiymat ko'pincha qo'llaniladi.

Shunday qilib, clear xususiyati oqimni bekor qiladi. Bizning holatda, bu bizga birinchi divdagi "suzuvchi" rasm ikkinchi divga kirib bormasligini ta'minlashga imkon beradi.

Bunda clear suzuvchi elementlar kirib bormasligi kerak bo'lgan elementga beriladi, ya'ni bizning holatda uni ikkinchi divga berish kerak.

Buni qilaylik - ikkinchi divga parent sinfidan tashqari clearfix sinfini ham beraylik va bu yangi sinf uchun clear xususiyatini both qiymatida belgilaylik - rasmning kirib borishi yo'qoladi:

<div class="parent">
	<img src="img.png" alt="">
	matn
</div>
<div class="parent clearfix">
	matn
</div>

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

.clearfix {
	clear: both;
}

clearfix nomi keng qabul qilingan, shuning uchun kelgusida aynan shundan foydalaning.