Рад кардани гардиши матн бо воситаи хосияти clear дар CSS

Барои ҳалли чунин мушкилиёт хосияти махсуси 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 умуман қабул шудааст, бояд дар оянда аҳамият ба он диҳед.