Co to jest clearfix?
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.