Sobes.tech
Middle

Кадом усулҳои манъ кардани ҷараён (clearing)-ро медонед ва дар куҷо истифода мешаванд?

sobes.tech AI

Ҷавоб аз AI

  • clear: both;: Самтарин ва боэътимодтарин усул. Ба унсури истифода мешавад, ки бояд дар поёни ҳамаи унсурҳои қаблӣ қарор гирад. Ин метавонад як унсури холӣ ё яке аз унсурҳои тарҳсозӣ бошад.
  • Илова кардани унсури холӣ бо clear: both;: Баъзан барои таъмини тоза кардани обтекание, махсусан дар кор бо тарҳҳои мураккаб истифода мешавад. Ин як div холӣ ё унсури дигарест, ки блокӣ аст.
  • Псевдо-элемент :after бо clear: both;: Рӯҳияи муосиртар. Ба контейнери унсурҳои қаблӣ татбиқ мешавад. Эҷод мекунад "виртуалӣ" унсур пас аз мундариҷаи охирини контейнер, ки обтекание-ро барқарор мекунад.
/* Намунаи истифодаи псевдо-элемент :after */
.container::after {
  content: ""; /* Хусусияти ҳатмӣ барои псевдо-элементҳо */
  display: table; /* Бисёр вақт барои беҳтар кардани мувофиқият истифода мешавад */
  clear: both;
}
  • overflow: hidden; ё overflow: auto;: Ба контейнери унсурҳои қаблӣ татбиқ мешавад. Мавзӯъро навсозӣ мекунад, ки "обтекание"-ро дар дохили худ тоза мекунад. Аммо, ин метавонад мундариҷаро канда ё сатрҳои ҳаракатро эҷод кунад, агар мундариҷа аз ҳад гузарад.
  • Контексти блокӣ барои форматинг (BFC): Ҳамаи усулҳои дар боло зикршуда, ба истиснои унсури холӣ, ба навъе BFC-ро эҷод мекунанд, ки ин ба тоза кардани обтекание оварда мерасонад. Хусусиятҳое, ки BFC-ро эҷод мекунанд:
    • float (қимати нолӣ нест)
    • overflow (қимати ғайри visible)
    • display: inline-block
    • position: absolute ё fixed
    • display: flow-root; (навтар, ба таври равшан BFC-ро эҷод мекунад)

Таблицаи муқоиса:

Метод Ба чӣ татбиқ мешавад Чӣ гуна тоза мекунад Мушкилоти эҳтимолӣ
clear: both; Унсур Тозаи равшан Унсури иловагӣ
Унсури холӣ + clear Унсури холӣ Тозаи равшан Унсури иловагӣ
:after + clear Контейнер Псевдо-элемент Қиинтар барои фаҳмидани барои навкорон
overflow: hidden/auto; Контейнер Эҷоди BFC Кандагӣ/скролл
Эҷоди BFC бо хусусияти дигар Контейнер Эҷоди BFC Номаълуми, таъсироти тарафайн
display: flow-root; Контейнер Эҷоди равшан BFC Нақшаи кӯҳна дар браузерҳои кӯҳна

Куҷо истифода мешавад:

  • Барои он, ки унсури пас аз унсурҳои қаблӣ дар поён намоиш дода шавад.
  • Барои он, ки контейнер, ки танҳо унсурҳои қаблӣ дорад, дар баландӣ суст нашавад.
  • Дар тарҳҳои мураккаб барои назорати ҷараёни ҳуҷҷат дар атрофи унсурҳои қаблӣ.