clear

  • Revision slug: CSS/clear
  • Revision title: clear
  • Revision id: 20603
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment rewrite

Revision Content

{{template.CSSRef()}}

Summary

The clear property specifies whether an element is prohibited from being next to CSS:float floating elements that precede it.

  • Initial value: none
  • Applies to: block-level elements (including floats)
  • Inherited: No
  • Media: Visual

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

{{template.CSSRefExampleLink("clear")}}

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

Notes

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.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4
Firefox 1
Netscape 4
Mozilla 1


See also

{{template.Cssxref("float")}}, {{template.Cssxref("cursor")}}, {{template.Cssxref("display")}}, {{template.Cssxref("position")}}, {{template.Cssxref("visibility")}}

{{ wiki.languages( { "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu" } ) }}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The clear property specifies whether an element is prohibited from being next to <a href="en/CSS/float_floating">CSS:float floating</a> elements that precede it.
</p>
<ul><li> Initial value: none
</li><li> Applies to: block-level elements (including floats)
</li><li> Inherited: No
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<p>clear: none | left | right | both | <a href="en/CSS/inherit">inherit</a>
</p>
<h3 name="Values"> Values </h3>
<ul><li> <b>none</b> : Element is <i>not</i> moved down to clear past floating elements.
</li><li> <b>left</b> : Element is moved down to clear past <i>left</i> floats.
</li><li> <b>right</b> : Element is moved down to clear past <i>right</i> floats.
</li><li> <b>both</b> : Element is moved down to clear past <i>both</i> left and right floats.
</li></ul>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("clear")}}
</p>
<pre>h1 { clear: none }
h2 { clear: right }</pre>
<h3 name="Notes"> Notes </h3>
<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_edges">border edge</a> of the element down until it is below the <a href="en/CSS/box_edges">margin edge</a> of all relevant floats.  This movement (when it happens) causes <a href="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_edges">margin edge</a> of the element below the <a href="en/CSS/box_edges">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">block formatting context</a>.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li>  <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Mozilla</td>
    <td>1</td>
  </tr>
</tbody></table>
<p><br>
</p>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("float")}}, {{template.Cssxref("cursor")}}, {{template.Cssxref("display")}}, {{template.Cssxref("position")}}, {{template.Cssxref("visibility")}}
</p>{{ wiki.languages( { "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu" } ) }}
Revert to this revision