float
właściwość określa, czy dany element powinien unosić.
clear
właściwość służy do kontrolowania zachowania elementów pływających.
Własność float
W najprostszej użytkowania, float
nieruchomość może być użyty do zawijania tekstu wokół obrazów.
Poniższy przykład wskazuje, że obraz powinien pływać na prawo w tekście:
clear nieruchomości
clear
właściwość służy do kontrolowania zachowania elementów pływających.
Elementy po elementu pływającego popłynie wokół niego. Aby tego uniknąć, należy użyć clear
obiektu.
clear
właściwość określa, w którym boki elementu pływającego elementów nie mogą unosić się:
clearfix Hack - overflow: auto;
Jeśli element jest wyższy niż element zawierającej go, i jest dystrybuowana będzie przelewać poza opakowanie.
Następnie możemy dodać overflow: auto;
do elementu zawierającego aby rozwiązać ten problem:
Przykład Web Layout
Oczywiste jest, aby zrobić całe układy internetowych za pomocą float
właściwość:
Przykład
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
}
Spróbuj sam " Więcej przykładów
Obraz z granicy i marże, które unosi się w prawo w ustępie
Niech się pływak obrazu w prawo w ust. Dodaj obramowanie i marginesy do obrazu.
Obraz z podpisem, że unosi się w prawo
Niech obraz za pomocą pacy podpis do prawej.
Niech pierwszą literę akapitu pływaka w lewo
Niech pierwszą literę akapitu pływaka po lewej i styl listu.
Tworzenie poziomego menu
Za pomocą pacy z listą linków do utworzenia poziomego menu.
Tworzenie głównej bez tabel
Za pomocą pacy stworzyć stronę z nagłówkiem, stopką, lewy treści i głównej zawartości.
Wszystkie właściwości CSS spławikowe
Nieruchomość | Opis |
---|---|
clear | Określa na których stronach elementu, gdzie elementy pływające nie mogą się unosić |
float | Określa, czy element powinien unosić |
overflow | Określa, co się dzieje, jeśli treść przelewa pole danego elementu |
overflow-x | Określa, co należy zrobić z lewej / prawej krawędzi zawartości jeśli przelewa obszar zawartości tego elementu |
overflow-y | Określa, co należy zrobić z górnej / dolnej krawędzi zawartości jeśli przelewa obszar zawartości tego elementu |