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.

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ć.

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ą).

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.

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:

• element pierwszy ze stylem float: left,
• element drugi opływający ten pierwszy po prawej stronie,
• element trzeci znajdujący się wewnątrz elementu drugiego i posiadający styl float: left,
• element czwarty znajdujący się wewnątrz elementu drugiego i opływający element trzeci po prawej stronie.

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:

• element pierwszy ze stylem float: left i ustawioną wyskością większą niż wysokość elementu trzeciego (w celach prezentacyjnych),
• element drugi opływający ten pierwszy po prawej stronie,
• element trzeci znajdujący się wewnątrz elementu drugiego i posiadający styl float: left,
• element czwarty znajdujący się wewnątrz elementu drugiego i posiadający styl clear: left.

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ł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.

.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;
}