Użycie właściwości Clearfix może automatycznie dostosować element nadrzędny do elementu podrzędnego i naprawić problemy w kodzie HTML za pomocą niektórych atrybutów, takich jak „ przelewowy ”, który kontroluje wymiary elementów nadrzędnych i podrzędnych bez konieczności stosowania dodatkowych znaczników.
Korzystanie z właściwości Clearfix
Przyjrzyjmy się, jak używać właściwości clearfix, aby wiedzieć, co robi z danymi wyjściowymi, dodając właściwość CSS clearfix we fragmencie kodu HTML:
Bez właściwości Clearfix
Uruchommy fragment kodu bez wykonywania właściwości clearfix, aby zrozumieć rodzaj problemów, które clearfix jest w stanie rozwiązać:
Utwórz klasę w HTML, która wstawia obraz do kontenera div:
< dz klasa = „wyczyść poprawkę” >
< br >< img klasa = 'img' źródło = 'obraz.png' wszystko = 'obraz' szerokość = „250” wysokość = „180” >
Tekst...
< / dz >
Poniżej znajduje się kod CSS dla powyższego kodu HTML:
.clearfix {
granica : 3 piks solidny #2baa12 ;
wyściółka : 5 piks ;
}
.img {
platforma : lewy ;
}
Spowoduje to wygenerowanie danych wyjściowych w taki sposób, że klasa potomna zawierająca obraz przepełni się poza kontenerem. W takich sytuacjach można użyć właściwości clear fix, aby łatwo usunąć lub naprawić ten problem:
Z właściwością Clearfix
Aby rozwiązać ten problem, możemy po prostu dodać plik przelewowy atrybut o wartości równej automatyczny który dostosuje kontener nadrzędny zgodnie z rozmiarem elementu podrzędnego:
.clearfix {
granica : 3 piks solidny #2baa12 ;
wyściółka : 5 piks ;
}
.clearfix {
przelewowy : automatyczny ;
}
.img {
platforma : lewy ;
}
W tym fragmencie kodu klasą nadrzędną jest kontener, a obraz jest wstawiany do klasy podrzędnej:
< dz klasa = „wyczyść poprawkę” >< br >< img klasa = 'img' źródło = 'obraz.png' wszystko = 'obraz' szerokość = „250” wysokość = „180” >
Tekst...
< / dz >
Dodanie właściwości clearfix spowoduje automatyczne rozszerzenie elementu nadrzędnego (kontenera) zgodnie z rozmiarem elementu podrzędnego, którym jest wstawiony obraz:
Tak działa właściwość Clearfix w HTML.
Wniosek
Właściwość clearfix służy do dostosowywania elementów potomnych w HTML zgodnie z elementami nadrzędnymi za pomocą prostej właściwości clearfix bez konieczności stosowania dodatkowych znaczników. Użycie CSS Clearfix zwiększa lub zmniejsza wymiary elementów nadrzędnych, aby dopasować je do wymiarów elementów podrzędnych.