Sobes.tech
Middle

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

sobes.tech AI

Ҷавоб аз AI

  • overflow: hidden; ё overflow: auto;: Ин ба падари ун элемент(ҳо) бо float татбиқ мешавад. Мавзӯи навини форматсозии блок (BFC) месозад, ки падарро ба дохили худ дароз кардани ун элемент(ҳо) дар баландӣ.

Вазъият: Самтҳои соддатарин барои пинҳон кардани мундариҷа, ки аз ҳадди элемент мегузарад ё барои истифодаи скролл, аммо инчунин ҳамчун усули тоза кардани истифода мешавад.

  • clear: both;: Ба ун элементи татбиқ мешавад, ки набояд пешинаи онро бо float пӯшонад. Ин ун ба поёни ҳамаи ун элемент(ҳо) ҷойгир мешавад.

Вазъият: Вақте ки лозим аст, ки навбат ё бахшро пас аз ун элементҳо, ки якдигарро пӯшонидаанд, созем.

  • Усули clearfix (псевдо-элементҳои ::after): Псевдо-элементро ба контейнери падар бо хусусиятҳои муайян илова мекунад, ки рафтори clear: both;-ро имитатсия мекунад, аммо бе зарурати илова кардани ун элемент(ҳо) дар HTML.
.clearfix::after {
    content: ""; /* Мавзӯи зарурӣ барои намоиши псевдо-элемент */
    display: table; /* Месозад як контексти нав барои форматсозии блок, монанди overflow: hidden; */
    clear: both; /* Тоза кардани истифода мешавад */
}

Вазъият: Самтҳои маъмул ва тавсияшудаи тоза кардани ун, ки тоза аст ва сохтори маркро вайрон намекунад. Ба ун падар, ки ун элементҳоро дар бар мегирад, татбиқ мешавад.

  • Истифодаи display: flex ё display: grid: Усулҳои муосири тарҳрезӣ, ки талаб намекунад, ки унро пӯшонанд барои ҷойгиркунии ун, ва аз ин рӯ, зарурати тоза карданро бартараф мекунанд. Вазъият: Дар сохтани тарҳҳои мураккаб ё вақте ки назорати бештар дар ҷойгиркунии унҳо лозим аст.

  • Илова кардани ун ёрии бо clear: both; (усули кӯҳна): Пурра HTML-ро пас аз ун элементҳо ворид мекунад ва ба он clear: both; татбиқ мекунад. Вазъият: Ин усул ҳамчун кӯҳна ва нолозим ҳисобида мешавад, зеро HTML иловагӣ илова мекунад.