Kokius srauto draudimo (clearing) metodus žinote ir kur jie taikomi?

• clear: both;: Dažniausiai naudojamas ir patikimiausias metodas. Taikomas elementui, kuris turi būti žemiau visų ankstesnių plaukiančių elementų. Tai gali būti atskiras tuščias elementas arba vienas iš maketo elementų.
• Tuščio elemento pridėjimas su clear: both;: Kartais naudojama siekiant užtikrinti, kad apvyniojimas būtų išvalytas, ypač dirbant su sudėtingais maketais. Tai yra tuščias div arba kitas blokinis elementas.
• Pseudo-elementas :after su clear: both;: modernesnis požiūris. Taikomas plaukiančių elementų konteinerui. Sukuria "virtualų" elementą po paskutinio turinio, taip atstatydamas apvyniojimą.

/* Pavyzdys pseudo-elemento :after naudojimo */
.container::after {
  content: ""; /* Būtinas pseudo-elemento savybė */
  display: table; /* Dažnai naudojama geresnei suderinamumui */
  clear: both;
}

• overflow: hidden; arba overflow: auto;: Taikoma plaukiančių elementų konteinerui. Sukuria naują blokinio formato kontekstą, kuris "valo" apvyniojimą. Tačiau tai gali apkarpyti turinį arba sukelti slankiklius, jei turinys viršija konteinerio ribas.
• Formatavimo blokinis kontekstas (BFC): Visi aukščiau išvardyti metodai, išskyrus aiškų tuščią elementą, kažkaip sukuria naują BFC, kas lemia apvyniojimo atstatymą. BFC savybės:
  • float (ne nulinė reikšmė)
  • overflow (reikšmė, skiriasi nuo visible)
  • display: inline-block
  • position: absolute arba fixed
  • display: flow-root; (palyginti nauja, aiškiai sukuria BFC)

Lentelė palyginimui:

Metodas	Taikymas kam	Kaip atstatyti	Galimi problemos
clear: both;	Elementas	Aiškus atstatymas	Papildomas elementas
Tuščias elementas + clear	Tuščias elementas	Aiškus atstatymas	Papildomas elementas
:after + clear	Konteineris	Pseudo-elemntas	Sudėtingiau suprasti pradedantiesiems
overflow: hidden/auto;	Konteineris	BFC sukūrimas	Apkarpymas/Slankikliai
BFC sukūrimas kitu savybe	Konteineris	BFC sukūrimas	Nenumatyta, šalutiniai efektai
display: flow-root;	Konteineris	Aiškus BFC sukūrimas	Nepalaikymas senesniuose naršyklėse

Kur taikoma:

• Kad elementas po plaukiančių elementų pradėtų rodyti po jais.
• Kad konteineris, turintis tik plaukiančius elementus, nesusitrauktų pagal aukštį.
• Sudėtinguose maketuose dokumento srauto kontrolei aplink plaukiančius elementus.