Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 20623 of clear

  • Revision slug: CSS/clear
  • Revision title: clear
  • Revision id: 20623
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 55 words added

Revision Content

{{ CSSRef() }}

Summary

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.

When it applies to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

When it applies to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

If you want an element to contain all floating elements inside it, you can either float the container as well, or use clear

#container:after { content: "."; line-height: 0; height: 0; display: block; visibility: hidden; clear: both;}
  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: block-level elements (including floats)
  • {{ Xref_cssinherited() }}: No
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

clear: none | left | right | both | inherit

Values

none
Element is not moved down to clear past floating elements.
left
Element is moved down to clear past left floats.
right
Element is moved down to clear past right floats.
both
Element is moved down to clear past both left and right floats.

Examples

{{ CSSRefExampleLink("clear") }}

h1 { clear: none }
h2 { clear: right }

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

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

Revision Source

<p>{{ CSSRef() }}</p>
<h2 name="Summary">Summary</h2>
<p>The <code>clear</code> <a href="/en/CSS" title="CSS">CSS</a> property specifies whether an element can be next to <a href="/en/CSS/float" title="en/CSS/float">floating</a> elements that precede it or must be moved down (cleared) below them.</p>
<p>The clear property applies to both floating and non-floating elements.</p>
<p>When it applies to non-floating blocks, it moves the <a href="/en/CSS/box_model" title="en/CSS/box_model">border edge</a> of the element down until it is below the <a href="/en/CSS/box_model" title="en/CSS/box_model">margin edge</a> of all relevant floats. This movement (when it happens) causes <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> not to occur.</p>
<p>When it applies to floating elements, it moves the <a href="/en/CSS/box_model" title="en/CSS/box_model">margin edge</a> of the element below the <a href="/en/CSS/box_model" title="en/CSS/box_model">margin edge</a> of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.</p>
<p>The floats that are relevant to be cleared are the earlier floats within the same <a href="/en/CSS/block_formatting_context" title="en/CSS/block_formatting_context">block formatting context</a>.</p>
<div class="note"> <p>If you want an element to contain all floating elements inside it, you can either float the container as well, or use clear</p> <pre>#container:after { content: "."; line-height: 0; height: 0; display: block; visibility: hidden; clear: both;}
</pre>
</div>
<ul class="cssprop"> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: block-level elements (including floats)</li> <li>{{ Xref_cssinherited() }}: No</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul><h2 name="Syntax">Syntax</h2>
<pre class="eval syntaxbox">clear: none | left | right | both | <a href="/en/CSS/inherit" title="en/CSS/inherit">inherit</a>
</pre>
<h3 name="Values">Values</h3>
<dl> <dt><code>none</code></dt> <dd>Element is <em>not</em> moved down to clear past floating elements.</dd> <dt><code>left</code></dt> <dd>Element is moved down to clear past <em>left</em> floats.</dd> <dt><code>right</code></dt> <dd>Element is moved down to clear past <em>right</em> floats.</dd> <dt><code>both</code></dt> <dd>Element is moved down to clear past <em>both</em> left and right floats.</dd>
</dl><h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("clear") }}</p>
<pre>h1 { clear: none }
h2 { clear: right }</pre>
<h2>Specifications</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/REC-CSS1#clear">CSS 1 Box properties #clear</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear">CSS 2.1 Visual formatting model #clear</a></li>
</ul>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2 name="See_also">See also</h2>
<ul> <li>{{ Cssxref("float") }}</li> <li><a href="/en/CSS/box_model" title="en/CSS/box_model">Box model</a></li>
</ul>
<p>{{ languages( { "de": "de/CSS/clear", "fr": "fr/CSS/clear", "pl": "pl/CSS/clear" } ) }}</p>
Revert to this revision