Jak to zrobić - Wyczyść pływaki (Clearfix)
Dowiedz się, jak usuwać pływaki za pomocą hacka „clearfix”.
Jak wyczyścić pływaki (Clearfix)
Elementy po pływającym elemencie będą opływać go. Użyj hacka „clearfix”, aby rozwiązać problem:
Bez Clearfix
Z Clearfix
Clearfix Hack
Jeśli element jest wyższy niż element go zawierający i jest pływający, przeleje się poza swój kontener.
Następnie możemy dodać overflow: auto;
do elementu zawierającego, aby naprawić ten problem:
Przykład
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.