Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Tabele

Przepływanie i oblewanie

Email Drukuj PDF

Tematy: pozycjonowanie | odległości | pionowe wyrównanie | przepływanie i oblewanie | stos

Dane w pigułce
Zastosowanie przepływanie elementów w lewo lub w prawo
Dziedziczenie tak
Wartości none, left, right
Wartość domyślna none
Przykład float:right
Uwagi
Odpowiednik w HTML atrybut align

Aby zdefiniować przepływanie elementu, należy wpisać w definicji stylu float: wartość.

Polecenie float pozwala przepływać elementom we wskazanym kierunku w danej linii i opływać go sąsiadującym elementom z przeciwnego kierunku.

<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float: left">
<p>Obrazek przepływający na lewo i tekst opływający go z prawej strony.</p>

Zauważ, że bez użycia float tekst nie mógłby się pojawić na prawo od obrazka, gdyż akapit z tekstem jest elementem blokowym, który zajmuje oddzielny pojemnik. Polecenie float pozwoliło przełamać tę zasadę.

pcq

Obrazek przepływający na lewo i tekst opływający go z prawej strony.

<h1 style="float:left; max-width:100px; padding-left:10px; padding-right:10px">Wieści z Sieci</h1>
<p style="border: 1px dotted; padding:10px; max-width:300px; ">Wieści z Sieci ...

Wieści z Sieci

Wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci wieści z Sieci

<div style="float:left; width:49%; height:100px; background-color:beige; ">
<h1>blok 1</h1>
</div>
<div style="float:right; width:49%; height:100px; background-color:floralwhite; ">
<h1>blok 2</h1>
</div>

blok 1

blok 2

<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float: right">
<p>Obrazek przepływający na prawo i tekst opływający go z lewej strony.</p>

pcq

Obrazek przepływający na prawo i tekst opływający go z lewej strony

<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float: none"> Obrazek ustawiony bez opływania.

pcq

Obrazek ustawiony bez opływania.

Gdybyśmy chcieli natomiast "skontrować" opływanie elementów, możemy się posłużyć parametrem clear, który zrzuca w dół element. Przyjmuje on wartości left, right i both.

<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float:left">
<p>Akapit bez clear</P>

pcq

Akapit bez clear

<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float:left">
<p style="clear:left">zrzucony akapit</p>

pcq

Zrzucony akapit, pomimo użycia przepływania

<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float:right">
<p>Akapit bez clear</p>

pcq

Akapit bez clear

<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float:right">
<p style="clear:right">Zrzucony akapit</P>

pcq

Zrzucony akapit, pomimo przepływania


Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15345445