Przepływanie elementów
| 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.
<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ę.
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>
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.
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>
Akapit bez clear
<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float:left">
<p style="clear:left">zrzucony akapit</p>
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>
Akapit bez clear
<img src="../grafika/pcq.gif" width="80" height="114" alt="pcq" style="float:right">
<p style="clear:right">Zrzucony akapit</P>
Zrzucony akapit, pomimo przepływania