Revision 6106 of float

  • Revision slug: CSS/float
  • Revision title: float
  • Revision id: 6106
  • Created:
  • Creator: mmclark
  • Is current revision? No
  • Comment 112 words added, 7 words removed

Revision Content

{{ CSSRef() }}

Summary

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

A floating element is one where the {{ Xref_csscomputed() }} of float is not none.

Syntax

float:  left | right | none | {{ Cssxref("inherit") }}

Values

left
The element floats on the left side of its containing block.
right
The element floats on the right side of its containing block.
none
The element does not float.

Examples

{{ CSSRefExampleLink("float") }}

<style type="text/css">
  div { border: solid red;  max-width: 70ex; }
  h4  { float: left;  margin: 0; }
</style>
 
<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
</div>

HELLO!

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

 

Notes

Note that if you're referring to this property from JavaScript as a member of the element.style object, you must spell it at cssFloat (see the list at DOM:CSS). Also note that IE spells this styleFloat.

How floats are positioned

As mentioned above, when an element is floated it is taken out of the normal flow of the document.  It is shifted to the left or right until it touches the edge of it's containing box or another floated element.

In the image below, there are three red squares.  Two are floated left and one is floated right.  Note that the second "left" red square is placed to the right of the first.  Additional squares  would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.

 

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

See also

{{ languages( { "de": "de/CSS/float", "es": "es/CSS/float", "fr": "fr/CSS/float", "pl": "pl/CSS/float" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> float </code>CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<p>A <strong>floating element</strong> is one where the {{ Xref_csscomputed() }} of<code> float </code>is not<code> none</code>.</p>
<h3>Syntax</h3>
<pre class="eval">float:  left | right | none | {{ Cssxref("inherit") }}</pre>
<h3>Values</h3>
<dl> <dt>left</dt> <dd>The element floats on the left side of its containing block.</dd> <dt>right</dt> <dd>The element floats on the right side of its containing block.</dd> <dt>none</dt> <dd>The element does not float.</dd>
</dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("float") }}</p>
<pre class="brush: html">&lt;style type="text/css"&gt;
  div { border: solid red;  max-width: 70ex; }
  h4  { float: left;  margin: 0; }
&lt;/style&gt;
 
&lt;div&gt;
  &lt;h4&gt;HELLO!&lt;/h4&gt;
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
&lt;/div&gt;
</pre>
<div style="border:solid red;max-width:70ex;">
<h4 style="float:left;margin:0;">HELLO!</h4>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
<p> </p>
<h3>Notes</h3>
<p>Note that if you're referring to this property from JavaScript as a member of the <a href="/en/DOM/element.style" title="en/DOM/element.style">element.style</a> object, you must spell it at<code> cssFloat </code>(see the list at <a href="/en/DOM/CSS" title="en/DOM/CSS">DOM:CSS</a>). Also note that IE spells this<code> styleFloat</code>.</p>
<h4>How floats are positioned</h4>
<p>As mentioned above, when an element is floated it is taken out of the normal flow of the document.  It is shifted to the left or right until it touches the edge of it's containing box <em>or another floated element</em>.</p>
<p>In the image below, there are three red squares.  Two are floated left and one is floated right.  Note that the second "left" red square is placed to the right of the first.  Additional squares  would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.</p>
<p><img alt="" class="internal" src="/@api/deki/files/4927/=floats.png" style="width: 729px; height: 248px;"></p>
<p> </p>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="http://www.w3.org/TR/CSS21/visuren.html#float-position">CSS 2.1 Visual formatting #float</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h3>See also</h3>
<ul> <li>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</li> <li><a href="/en/CSS/block_formatting_context" title="en/CSS/block_formatting_context">Block formatting context</a></li>
</ul>
<p>{{ languages( { "de": "de/CSS/float", "es": "es/CSS/float", "fr": "fr/CSS/float", "pl": "pl/CSS/float" } ) }}</p>
Revert to this revision