Układ CSS - przejrzysty i przejrzysty
Jasna nieruchomość
Kiedy używamy floatwłaściwości i chcemy mieć następny element poniżej (nie po prawej ani po lewej), będziemy musieli użyć clear
właściwości.
Właściwość clearokreśla, co powinno się stać z elementem znajdującym się obok elementu pływającego.
Właściwość clearmoże mieć jedną z następujących wartości:
-
none- Element nie jest wpychany pod lewy lub prawy element pływający. To jest domyślne -
left- Element jest wpychany pod lewe elementy pływające -
right- Element jest wpychany pod prawe elementy pływające -
both- Element jest wpychany pod zarówno lewy, jak i prawy element pływający -
inherit- Element dziedziczy czystą wartość po swoim rodzicu
Podczas czyszczenia elementów zmiennoprzecinkowych należy dopasować czyszczenie do elementu zmiennoprzecinkowego: jeśli element jest pływający w lewo, należy wyczyścić w lewo. Twój pływający element będzie nadal pływał, ale wyczyszczony element pojawi się pod nim na stronie internetowej.
Przykład
Ten przykład czyści pływak po lewej stronie. Tutaj oznacza to, że element <div2> jest wsunięty poniżej lewego pływającego elementu <div1>:
div1 {
float: left;
}
div2 {
clear: left;
}
Clearfix Hack
Jeśli pływający element jest wyższy niż element zawierający, „przepełni się” poza jego kontener. Następnie możemy dodać hack Clearfix, aby rozwiązać ten problem:
Bez Clearfix
Z Clearfix
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;
}
You will learn more about the ::after pseudo-element in a later chapter.