Koje metode blokiranja protoka (clearing) poznajete i u kojim situacijama se primenjuju?

• overflow: hidden; ili overflow: auto;: Primjenjuje se na roditeljski element element(a) sa float. Kreira novi kontekst formatiranja bloka (BFC), čime roditelj uključuje elemente koji ga okružuju u svoju visinu.

Situacija: Najjednostavniji način kada je potrebno sakriti sadržaj koji izlazi iz granica elementa ili primeniti skrolovanje, ali takođe funkcioniše i kao metoda čišćenja.

• clear: both;: Primjenjuje se na element koji ne bi trebao da okružuje prethodne elemente sa float. Ovaj element će biti smešten ispod svih okružujućih elemenata.

Situacija: Kada je potrebno kreirati novi red ili sekciju nakon elemenata koji se međusobno okružuju.

• Metoda clearfix (pseudo-elementi ::after): Dodaje pseudo-element roditeljskom kontejneru sa specifičnim svojstvima, imitirajući ponašanje clear: both;, ali bez potrebe za dodavanjem dodatnih HTML elemenata.

.clearfix::after {
    content: ""; /* Obavezni sadržaj za prikaz pseudo-elemnta */
    display: table; /* Kreira novi kontekst formatiranja, kao i overflow: hidden; */
    clear: both; /* Primjenjuje čišćenje */
}

Situacija: Najčešći i preporučeni način čišćenja, koji je čist i ne narušava strukturu markup-a. Primjenjuje se na roditeljski element koji sadrži okružujuće elemente.

• Korišćenje display: flex ili display: grid: Moderni načini rasporeda koji ne zahtevaju okruživanje za pozicioniranje elemenata, čime se eliminiše potreba za čišćenjem. Situacija: Prilikom pravljenja složenih rasporeda ili kada je potrebna fleksibilnija kontrola rasporeda elemenata.

• Dodavanje dodatnog elementa sa clear: both; (stara metoda): Umeće prazan HTML element nakon okružujućih elemenata i primenjuje mu clear: both;. Situacija: Smatra se zastarelim i neželjenim pristupom, jer dodaje suvišan HTML.