clear

clear հատկությունը float-ների վարքը կառավարող շատ կարևոր հատկություն է։ Համեմատրի երկու օրինակները։

<div class="box">...</div>
<section>...</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

Ես ինձ զգում եմ կարծես լողում եմ։

</div>

Այս տարբերակում section էլեմենտը գտնվում է div-ից հետո։ Սակայն, քանի որ div-ին ձախ float է տրված section-ի տեքստը լողում-փաթաթվում է div-ին և section-ը շրջապատում է դրան։
Ի՞նչ անել, եթե ուզում ես section-ը դիրքավորվի ճիշտ div-ից հետո։

</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

Ես ինձ զգում եմ կարծես լողում եմ։

</div>

Օգտագործելով clear-ը կարող ենք շարժել section-ը div-ից ներքև։ clear հատկությունը ունեցող div-ը առհամարում է իրենից առաջ գրված էլեմենտի float-ի արժեքը։ Այստեղ օգտագործված է clear հատկության left արժեքը, ձախ լողացող էլեմենտների ազդեցությունից ազաատվելու համար։ clear հատկության մյուս արժեքներից են right և both։

</section>

Ետ Առաջ