Kādus plūsmas aizliegšanas (clearing) metodes jūs zināt un kur tās tiek izmantotas?

• clear: both;: Visbiežāk izmantotā un uzticama metode. Tiek piemērots elementam, kuram jāatrodas zem visiem iepriekšējiem plūstošajiem elementiem. Tas var būt atsevišķs tukšs elements vai viens no izkārtojuma elementiem.
• Tukša elementa pievienošana ar clear: both;: Dažreiz tiek izmantots, lai nodrošinātu, ka apvijums tiek notīrīts, īpaši sarežģītos izkārtojumos. Tas ir tukšs div vai cits bloka elements.
• Pseudo-elements :after ar clear: both;: Mūsdienīgāka pieeja. Tiek piemērots plūstošo elementu konteineram. Izveido "viltus" elementu pēc konteinera satura, tādējādi atjaunojot apvijumu iekšpusē.

/* Piemērs pseudo-elementa :after izmantošanai */
.container::after {
  content: ""; /* Obligāta īpašība pseudo-elementiem */
  display: table; /* Bieži tiek izmantots labākai saderībai */
  clear: both;
}

• overflow: hidden; vai overflow: auto;: Tiek piemērots plūstošo elementu konteineram. Izveido jaunu bloka formāta kontekstu, kas "notīra" apvijumu. Tomēr tas var sagriezt saturu vai radīt ritjoslas, ja saturs pārsniedz konteineru robežas.
• Formāta bloka konteksts (BFC): Visi iepriekš minētie metodes, izņemot skaidru tukšu elementu, kaut kādā veidā rada jaunu BFC, kas noved pie apvijuma atjaunošanas. BFC īpašības:
  • float (ne nulles vērtība)
  • overflow (vērtība, kas atšķiras no visible)
  • display: inline-block
  • position: absolute vai fixed
  • display: flow-root; (salīdzinoši jauns, skaidri rada BFC)

Tabula salīdzinājumam:

Metode	Piemērošana kam	Kā atjaunot	Potenciālas problēmas
clear: both;	Elements	Skaidrs atjaunošana	Papildu elements
Tukšs elements + clear	Tukšs elements	Skaidrs atjaunošana	Papildu elements
:after + clear	Konteineris	Pseudo-elements	Sarežģītāk saprast iesācējiem
overflow: hidden/auto;	Konteineris	BFC izveide	Griezums/ritjoslas
BFC izveide ar citu īpašību	Konteineris	BFC izveide	Neizteikts, blakus efekti
display: flow-root;	Konteineris	Skaidrs BFC izveide	Nepieciešama vecāku pārlūkprogrammu atbalsts

Kur tas tiek izmantots:

• Lai elements pēc plūstošajiem elementiem sāktu parādīties zem tiem.
• Lai konteiners, kas satur tikai plūstošos elementus, neizlīdzinātos pēc augstuma.
• Sarežģītos izkārtojumos, lai kontrolētu dokumenta plūsmu ap plūstošajiem elementiem.