---
title: float
slug: Web/CSS/float
tags:
  - CSS
  - 'CSS:Dokumentacje'
  - Dokumentacje
  - Wszystkie_kategorie
translation_of: Web/CSS/float
---
<p>{{ CSSRef() }}</p>

<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>

<p>Własność <strong>float</strong> określa, że element powinien być wyjęty z normalnego przepływu i umieszczony przy lewej lub prawej stronie zawierającego go kontenera, zaś tekst i elementy liniowe będą zawijały się wokół niego.</p>

<ul>
 <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li>
 <li>Stosowana do: wszystkich elementów</li>
 <li>{{ Xref_cssinherited() }}: no</li>
 <li>Procenty:</li>
 <li>Media: {{ Xref_cssvisual() }}</li>
 <li>{{ Xref_csscomputed() }}: jako określone</li>
</ul>

<p><strong>Element pływający</strong> jest jedynym, gdzie <a href="pl/CSS/warto%c5%9b%c4%87_wyliczona">wartość wyliczona</a> <code>float</code> <strong>nie</strong> jest równa <code>none</code>.</p>

<p>Zauważ, że, jeśli odwołujesz się do tej wartości z JavaScript jako elementu obiektu <a href="pl/DOM/element.style">element.style</a>, musisz oznaczyć to <strong>cssFloat</strong> (zobacz listę na <a href="pl/DOM/CSS">DOM:CSS</a>). Zwróć też uwagę, że IE nazywa to <strong>styleFloat</strong>.</p>

<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3>

<p>float: left | right | none | <a href="pl/CSS/inherit">inherit</a></p>

<h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3>

<ul>
 <li><strong>left</strong> : Element pływa po lewej stronie zawierającego go bloku.</li>
 <li><strong>right</strong> : Element pływa po prawej stronie zawierającego go bloku.</li>
 <li><strong>none</strong> : Element nie pływa.</li>
</ul>

<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3>

<p><a href="/samples/cssref/float.html">Zobacz przykład</a></p>

<pre>&lt;html&gt;
 &lt;head&gt;
  &lt;style type="text/css"&gt;
   b
   {
     font-size: 25px;
     float:right;
   }
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;

  &lt;p&gt;
    &lt;b&gt;HELLO!&lt;/b&gt;
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
    To jest jakiś tekst. To jest jakiś tekst. To jest jakiś tekst.
  &lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 id="Notatki" name="Notatki">Notatki</h3>

<p>TODO: Notatka powinna wyjaśniać, jak elementy pływające są pozycjonowane. Wzmianka o <a href="pl/CSS/block_formatting_context">block formatting context</a>.</p>

<h3 id="Specyfikacje" name="Specyfikacje">Specyfikacje</h3>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li>
</ul>

<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85">Zgodność z przeglądarką</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Przeglądarka</th>
   <th>Najniższa wersja</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Netscape</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
  </tr>
 </tbody>
</table>

<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3>

<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</p>

<div class="noinclude"> </div>

<p>{{ languages( { "en": "en/CSS/float", "es": "es/CSS/float", "fr": "fr/CSS/float" } ) }}</p>