jesteś w: Główna > css > CSS - opływanie
Ostatnia aktualizacja tej strony: 2006-08-22, 21:08:41

Więcej o stylu float

Poniżej przedstawiam kilka rysunków pozwalających lepiej zrozumieć zasadę działania stylu float. Ważne jest, że tak naprawdę nie to nie element opływa inny element ale tekst, który jest w nim zawarty (dotyczy to elementów blokowych). Dlatego tak jak pokazano na rysunku ramki elementów opływajacych zachodzą na element opływany, ale tekst w nich zawarty już nie.

Przykład oblewania elementu i nakładania się ramek

Jeśli chcemy usunąć opływanie należy użyć stylu clear posiadającego trzy opcje: right, left, both odpowiadające odpowiednim stylom float. Zastosowanie tego właśnie stylu w elemencie trzecim powoduje, że znalazł się on poniżej elemntu pierwszego, któremu przypisano styl float: left, zamiast go opływać.

Przykład oblewania elementu i zasosowanie stylu clear w celu anulowania oblewania

Gdy chcemy elementom dodać ramkę, ale jednocześnie nie chcemy by widoczne było nakładanie się elementów, musimy zastosować odpowiednie marginesy, które "odepchną" cały element (łącznie z jego ramką).

Przykład oblewania elementu przez element z ustawionym odpowiednio dużym marginsem

Wszystkie powyższe zasady mają także zastosowanie w przypadku elementów zagnieżdzonych. Na rysunku pokazano 3 elementy <div>, z których pierwszy ma przypisany styl float: left, drugi opływa ten pierwszy, a trzeci znajduje się wewnątrz drugiego. Widać, że zarówno ramka elementu drugiego jak i zagnieżdżonego w nim elementu trzeciego zachodzi na element pierwszy.

Przykład oblewania przez elementy zagnieżdzone

Poniższy rysunek przedstawia cztery elementy i "zagnieżdżone" opływanie, które zachowyje się dokładnie tak jak można było tego oczekiwać. Występują one w następującej kolejności:

Przykład oblewania wewnątrz elementów zagnieżdzonych

Jednak używając stylu float do budowy struktury witryny należy uważać na stosowanie stylu clear. Poniżej rysunek pokazuje cztery elementy w następującej kolejności:

Jak widać styl clear: left nie kasuje ostatniego opływania, ale wszystkie poprzednie, w związku z czym element czwarty nie znalazł się bezpośrenio pod elementem trzecim, ale został "zepchnięty" także pod element pierwszy (zepchnięty został tylko w pionie, ponieważ w poziomie ograniczał go element drugi).

Przykład działania stylu clear w elementach zagnieżdżonych

Przykładowy layout

Przykładowy layout uzyskany dzięki stylowi float i kod potrzebny do jego uzyskania. Zastosowałem w nim "box model hack", żeby layout wyglądał poprawnie także w starszych przeglądarkach. A tutaj (http://www.mynthon.net/d/css/ex/float.html) można zobaczyć jak taki układ zachowuje się w rzeczywistości.

Przykład layoutu uzyskanego dzięki oblewaniu. Układ dwu-kolumnowy z nagłowkiem, obejmujący 100% szerokości strony

.top{
	border: 1px solid red;
	width: 100%;
	height: 100px;
	}
.left{
	width: 300px;
	border:  1px solid red;
	padding: 10px;
	margin: 0px;
	float: left;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 278px;

}
html>body .left{
	width: 278px;
}
.content{
	border:  1px solid red;
	margin: 0px 0px 0px 200px;
	padding: 10px;
}

Menu

Działy:

Quick start:

Inne:

animacje Flash

Diablo 2: