Revision 6105 of float

  • Revision slug: CSS/float
  • Revision title: float
  • Revision id: 6105
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment +de / -"template."; 10 words added, 24 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.

TODO: should explain how floats are positioned.

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>
<p>TODO: should explain how floats are positioned.</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