Кадом усулҳои бастабандӣ (clearing)ро медонӣ ва дар кадом ҳолатҳо истифода мешаванд?

Роҳҳои пешгирии ҷараён:

• clear: left; — пешгирӣ аз ҷараёни чап. Вақте ки унсур набояд дар канори унсурҳои ҷараёнӣ дар чап ҷойгир шавад.
• clear: right; — пешгирӣ аз ҷараёни рост. Вақте ки унсур набояд дар канори унсурҳои ҷараёнӣ дар рост ҷойгир шавад.
• clear: both; — пешгирӣ аз ҷараёни ҳарду тараф. Вақте ки унсур набояд дар канори ягон унсури ҷараёнӣ ҷойгир шавад. Ин навъи маъмултарин аст.
• clear: none; (қимати пешфарз) — иҷозат медиҳад ҷараён.

Барномаҳо:

• Барои пешгирии "пӯшида" кардани контейнери падар: Агар ҳама унсурҳои кӯдакии падар ҷараёнӣ бошанд (дорои float), контейнери падар баландии худро аз даст медиҳад ва пӯшида мешавад. Илова кардани унсуре бо clear: both; пас аз унсурҳои ҷараёнӣ дар дохили падар ё истифодаи псевдо-элемент ::after бо clear: both; ин мушкилро ҳал мекунад.
• Барои ҷойгиркунии дуруст пас аз унсурҳои ҷараёнӣ: Агар унсурҳои оддӣ (на ҷараёнӣ) бояд дар зери унсурҳои ҷараёнӣ ҷойгир шаванд, на дар канори онҳо.
• Барои эҷоди "хатҳо" ё "хатҳо" дар макетҳои ҷараёнӣ: Вақте ки унсурҳои бо float бояд дар чанд хат ҷойгир шаванд, clear барои оғоз кардани хатҳои нав истифода мешавад.

Масалан барои истифодаи псевдо-элемент ::after барои тоза кардан:

.clearfix::after {
  content: ""; /* Муҳим барои намоиши псевдо-элемент */
  display: table; /* Ё block */
  clear: both; /* Хусусияти асосӣ барои тоза кардан */
}

Ин синф clearfix пас аз он ба унсури падар, ки унсурҳои кӯдакии ҷараёнӣ дорад, татбиқ мешавад.