Open main menu

CDOT Wiki β

Changes

CSS GUIDE CLEAR

2,155 bytes added, 23:13, 11 December 2006
no edit summary
<span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
== 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.
<table border="0">
<tr>
<td><b>Applicability:</b></td><td>The clear property can be used for block-level elements.<td>
</tr>
<tr>
<td><b>[http://developer.mozilla.org/en/docs/CSS:%40media#Media_groups Media Group:]</b>
</td><td>Visual</td>
</tr>
<tr>
<td><b>Inherited:</b></td><td>No</td>
</tr>
<tr>
<td><b>Default Value:</b></td><td>none</td>
</tr>
</table>

== Syntax ==
<pre>
TARGET_ELEMENT{clear: inhert !important}
TARGET_ELEMENT{clear: none}
TARGET_ELEMENT{clear: left}
TARGET_ELEMENT{clear: right}
TARGET_ELEMENT{clear: both}
</pre>

== Legal Values ==
<table border="1" cellspacing="2" cellpadding="5">
<tr>
<th align="left">Value</th><th align="left">Description</th>
</tr>
<tr>
<td>inherit</td><td>Explicitly sets the value to that of the parent</td>
</tr>
<tr>
<td>none</td><td>Allows floating elements on both sides.</td>
</tr>
<tr>
<td>left</td><td>No floating elements allowed on the left side.</td>
</tr>
<tr>
<td>right</td><td>No floating elements allowed on the right side.</td>
</tr>
<tr>
<td>both</td><td>No floating elements allowed on the left side or the right side.</td>
</tr>
</table>

== Mozilla Recommended Values ==

== Usage Examples ==
<pre>
h1{
clear: none
}

h2{
clear: right
}
</pre>

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

== Specification Conformance ==
*CSS 1
*[http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-right CSS 2.1]
*CSS 3

== Browser Compatibility ==

== See Also ==
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_LEFT left property]
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_BOTTOM bottom property]
* [http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_TOP top property]
1
edit