Najnowsze tutoriale tworzenie stron internetowych
 

CSS Układ - pływaka i jasne


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:

Przykład

img {
    float: right;
    margin: 0 0 10px 10px;
}
Spróbuj sam "

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ę:

Przykład

div {
    clear: left;
}
Spróbuj sam "

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

.clearfix {
    overflow: auto;
}
Spróbuj sam "

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 "

Przykłady

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