CSS да clear свойстви ёрдамида ўраб чиқишни бекор қилиш

Бундай муаммони ҳал қилиш учун ўраб чиқишни бекор қиладиган махсус clear свойстви мавжуд. left қиймати чап томондан ўраб чиқишни бекор қилади, right қиймати - ўнг томондан, both қиймати эса иккала томондан. Бу қиймат энг кўп ишлатилади.

Демак, clear свойстви ўраб чиқишни бекор қилади. Бизнинг ҳолимизда бу биринчи дивдаги сурат иккинчи див устига чиқиб қолишининг олдини олиш имконини беради.

Бунда clear свойстви ўз-oʻзида ёзгич элементлар чиқиб қолмаслиги керак бўлган элементга берилиши керак, яъни бизнинг ҳолимизда уни иккинчи дивга бериш лозим.

Келинг буни амалга оширамиз - иккинчи дивга parent синфи билан бирга clearfix синфини ҳам берамиз ва бу янги синф учун clear свойстви both қийматида белгилаймиз - суратнинг чиқиб қолиши йўқолади:

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

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

.clearfix {
	clear: both;
}

clearfix номи умуман қабул қилинган, шунинг учун кейин фойдаланганда айнан шу номдан фойдаланинг.