Słyszałem że ten kawałek kodu:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Ma podobne działanie co overflow: hidden czy dodanie clear: both w stopce (jeżeli działamy w modelu blokowym na stronie). Czym się więc różni lub z czym jest lepszy?
I moje kolejne pytanie, co robi tutaj content: "", do czego służy??
Z góry dziękuję za odpowiedź!
Z overflow: hidden nie ma to raczej związku.
Ja tego fixa używam najczęściej kiedy w jakimś rodzicu wszystkie elementy ustawiam obok siebie przy użyciu float
Jeśli wszystkie dzieci mają np float: left to nie rozciągają rodzica i ten zazwyczaj ma wysokość 0.
Jest to problem gdy nie chcesz ustawić wysokości rodzica na sztywno ale chcesz mu nadać jakieś tło czy obramowanie.
Sprawdź sobie to: https://jsfiddle.net/ptm1hq39/
Usuń .parent:after i zobacz co się dzieje z .parent.
Ja prościej tego wyjaśnić nie potrafię ;)
Jak dodajesz clear:both w kolejnym elemencie - to zaśmiecasz sobie potencjalnie html (dodając sztucznie element), albo css - przypisując to nie tam gdzie faktycznie pasuje.
(generalnie - idealny trójpodział weba : HTML - treść, CSS - wyświetlanie, JS - działanie. Wiec jeśli masz gdzieś w HTML element <br style="clear:borth"/> - to jest to smród - bo w HTML znalazło się coś co li tylko wygląd opisuje. ).
:after - robi Ci pseudo- element - którego nie ma w DOM ( i dzięki temu nie zaśmieca Ci źródła html ).Troche sztuka dla sztuki - ale fajne.
content:""; potrzebny jest jakoś afterom i before - inaczej są olewane (content: none; (defaultowy) trochę się zachowuje jak display: none; - nigdy nie znalazłem w specyfikacjach dlaczego :-) ).
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.
CSS 
HTML
overflow:auto, bo to ten styl jest odpowiedzialny m.in. za rozciągnięcie rodzica do rozmiaru "pływających" dzieci.