clear

  • Revision slug: CSS/clear
  • Revision title: clear
  • Revision id: 20601
  • Created:
  • Creator: Backinblakk
  • Is current revision? No
  • Comment /* Syntax */

Revision Content

{{template.CSSRef()}}

Summary

Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.

  • Initial value: none
  • Applies to: The clear property can be used for block-level elements.
  • Inherited: No
  • Media: Visual

Syntax

TARGET_ELEMENT{clear: inherit | none | left | right | both }

Values

  • inherit : Explicitly sets the value to that of the parent
  • none : Allows floating elements on both sides.
  • left : No floating elements allowed on the left side.
  • right : No floating elements allowed on the right side.
  • both : No floating elements allowed on the left side or the right side.

Examples

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

h1{
clear: none
}

h2{
clear: right
}

Notes

The clear property does not always work as expected if it is used along with the "float" property.

Specifications

Browser compatibility

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>Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed. 
</p>
<ul><li> Initial value: none
</li><li> Applies to: The clear property can be used for block-level elements.	
</li><li> Inherited: No
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre>TARGET_ELEMENT{clear: inherit | none | left | right | both }
</pre>
<h3 name="Values"> Values </h3>
<ul><li> <b>inherit</b> : Explicitly sets the value to that of the parent
</li><li> <b>none</b> : Allows floating elements on both sides.
</li><li> <b>left</b> : No floating elements allowed on the left side.
</li><li> <b>right</b> : No floating elements allowed on the right side.
</li><li> <b>both</b> : No floating elements allowed on the left side or the right side.
</li></ul>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("PROPERTYNAME")}}
</p>
<pre>h1{
clear: none
}

h2{
clear: right
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>The clear property does not always work as expected if it is used along with the "float" property.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li>  <a class="external" href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-clear">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<h3 name="Browser_compatibility_2"> 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