Co to jest clearfix?

Oczyszczanie pływaków w przeglądarce jest ważne dla wielu programistów. Clearfix to właściwość CSS (bardziej znana jako hack), która jest używana do wyczyszczenia lub naprawy elementów dzieci w klasie bez konieczności dodatkowych znaczników. Usuwa błędy, które występują, gdy dwa pływające elementy układają obok siebie.

Korzystanie z właściwości ClearFix może automatycznie dostosować element nadrzędny zgodnie z elementem dziecka i naprawić problemy w kodzie HTML za pomocą niektórych atrybutów, takich jak „przelewowy”, Który kontroluje wymiary elementów rodzica i dziecka bez wymagania dodatkowych znaczników.

Korzystanie z właściwości Clearfix

Zrozumiemy użycie właściwości ClearFix, aby wiedzieć, co robi z wyjściem, dodając właściwość CSS ClearFix w fragmencie kodu HTML:

Bez właściwości Clearfix

Uruchommy fragment kodu bez wykonywania właściwości ClearFix, aby zrozumieć rodzaje problemów, które ClearFix jest w stanie rozwiązać:

Utwórz klasę w HTML, która wstawia obraz do kontenera Div:

Tekst…

Poniżej znajduje się kod CSS dla powyższego HTML:

Wygeneruje to wyjście w taki sposób, że klasa dziecięca zawierająca obraz będzie się przepełniać poza kontenerem. W takich sytuacjach właściwość Clear Fix można wykorzystać do łatwego wyczyszczenia lub rozwiązania tego problemu:

Z właściwością Clearfix

Aby rozwiązać problem, możemy po prostu dodać przelewowy atrybut z wartością równą automatyczny To dostosuje pojemnik nadrzędny zgodnie z rozmiarem elementu dziecka:

Tutaj, w tym fragmencie kodu, klasa nadrzędna jest kontener, a obraz jest wstawiany w swojej klasie dziecięcej:

Tekst…

Dodanie właściwości ClearFix automatycznie rozszerzy element nadrzędny (kontener) zgodnie z rozmiarem elementu dziecięcego, który jest wstawionym obrazem:

W ten sposób działa właściwość Clearfix w HTML.

Wniosek

Właściwość Clearfix służy do dostosowania elementów dziecięcych w HTML zgodnie z elementami nadrzędnymi z prostą właściwością ClearFix bez wymagania dodatkowych znaczników. Korzystanie z CSS Clearfix zwiększa lub zmniejsza wymiary elementów macierzystych, aby je dostosować zgodnie z wymiarami elementów dziecka.