Koje metode zabrane protoka (clearing) poznajete i gde se primenjuju?

• clear: both;: Najčešće korišćena i pouzdana metoda. Primjenjuje se na element koji treba da bude ispod svih prethodnih floating elemenata. To može biti poseban prazan element ili jedan od elemenata rasporeda.
• Dodavanje praznog elementa sa clear: both;: Ponekad se koristi za garantovano resetovanje obuhvatanja, posebno pri radu sa složenim rasporedima. To je prazan div ili drugi blokovni element.
• Pseudo-element :after sa clear: both;: Moderniji pristup. Primjenjuje se na kontejneru floating elemenata. Kreira "virtuelni" element nakon poslednjeg sadržaja kontejnera, čime resetuje obuhvatanje unutar.

/* Primer korišćenja pseudo-elementa :after */
.container::after {
  content: ""; /* Obavezno svojstvo za pseudo-elemente */
  display: table; /* Često se koristi radi bolje kompatibilnosti */
  clear: both;
}

• overflow: hidden; ili overflow: auto;: Primjenjuje se na kontejneru floating elemenata. Kreira novi blokovni kontekst formatiranja koji "čisti" obuhvatanje unutar sebe. Međutim, to može obrezati sadržaj ili stvoriti trake za skrolovanje ako sadržaj izlazi izvan granica kontejnera.
• Blokovni kontekst formatiranja (BFC): Svi gore navedeni metodi, osim eksplicitnog praznog elementa, na neki način stvaraju novi BFC, što dovodi do resetovanja obuhvatanja. Svojstva koja stvaraju BFC:
  • float (ne nula vrednost)
  • overflow (vrednost različita od visible)
  • display: inline-block
  • position: absolute ili fixed
  • display: flow-root; (relativno nov, eksplicitno stvara BFC)

Tabela poređenja metoda:

Metod	Primena na šta	Način resetovanja	Potencijalni problemi
clear: both;	Element	Jasan reset	Dodatni element
Prazan element + clear	Prazan element	Jasan reset	Dodatni element
:after + clear	Kontejner	Pseudo-element	Složenije za razumevanje početnicima
overflow: hidden/auto;	Kontejner	Kreiranje BFC	Orezivanje/scrolling
Kreiranje BFC drugim svojstvom	Kontejner	Kreiranje BFC	Nejasno, sporedni efekti
display: flow-root;	Kontejner	Javno kreiranje BFC	Ograničena podrška u starijim pregledačima

Gde se primenjuje:

• Da bi element nakon floating elemenata počeo da se prikazuje ispod njih.
• Da kontejner koji sadrži samo floating elemente ne bi kolabirao po visini.
• U složenim rasporedima za kontrolu toka dokumenta oko floating elemenata.