CSS Float and Clear

CSS Float and Clear properties are positioning properties in CSS that allow you to wrap content around one element.

CSS Float

HTML elements like heading, paragraph, DIV  always render the context on the next line from the last element. CSS Float property is used to arrange HTML elements side by side to each other. The allowed values for this property are NONE, LEFT or RIGHT.

When you set CSS Float value to LEFT the element will align to left margin of the page or container element.

By setting CSS Float value to RIGHT the element will align to right margin of the page or container element.

If the CSS Position property is set to ABSOLUTE or FIXED the CSS FLOAT property is ignored by the browser.

Example

<HTML>
<STYLE>
.nofloatblock
{
background-color: yellow;
width:25%;
border:1px dotted green;
}
.floatleftblock
{
background-color: blue;
width:25%;
border:1px dotted red;
float:left;
}
.floatrightblock
{
background-color: green;
width:25%;
border:1px dotted white;
float:right;
}
</STYLE>
<BODY >
<div class="nofloatblock">Block 1</div>text after block with no float value
<div class="nofloatblock">Block 2</div>
<div class="floatleftblock">Block 3</div>
<div class="floatleftblock">Block 4</div>text after block with float left
<div class="floatrightblock">Block 5</div>
<div class="floatrightblock">Block 6</div>text after block with float right
</BODY>
</HTML>
CSS Float

In this example three class selectors are defined. FLOAT property for nofloatblock class selector is not specified. FLOAT property for floatleftblock class selector is set to left.  FLOAT property for floatrightblock class selector is set to right.  The nofloatblock DIV blocks with no FLOAT value set are arranged one after another in the next line. The content around DIV with floatleftblock  is moved to right and the DIV is aligned with left margin of page. The content around DIV with floatrightblock  is moved to left and the DIV is aligned with right margin of page.

CSS CLEAR

CSS CLEAR property can be set for HTML elements stylized with FLOAT property. CSS CLEAR property is used when the content around the element are not to be wrapped around but to be pushed onto the next line.  The allowed values for this property are NONE, BOTH, LEFT or RIGHT.

When you set CSS CLEAR value to LEFT the contents on the left of the floating element will be cleared.

When you set CSS CLEAR value to RIGHT the contents on the right of the floating element will be cleared.

Example

<HTML>
<STYLE>
p{background-color: green;float:left;}
.bothClear
{
background-color: yellow;
width:25%;
border:1px dotted green;
clear:both;
}
.NoneClear
{
background-color: red;
width:25%;
border:1px dotted yellow;
clear:none;
}
.LeftClear
{
background-color: blue;
width:25%;
border:1px dotted white;
clear:Left;
}
.RightClear
{
background-color: orange;
width:25%;
border:1px dotted gray;
clear:Right;
}
</STYLE>
<BODY >
<P>text for block with both clear </P><div class="bothClear">Block 1</div>
<P>text for block with None clear </P><div class="NoneClear">Block 2</div>
<P>text for block with Left clear </P><div class="LeftClear">Block 3</div>
<P>text for block with Right clear </P><div class="RightClear">Block 4</div>
</BODY>
</HTML>
CSS Clear

In this example four class selectors are defined. CLEAR property for NoneClear class selector is set to None. Clear property for BothClear class selector is set to Both.  CLEAR property for LeftClear class selector is set to LEFT and for RightClear is set to RIGHT.  The text before BothClear DIV block takes text normally without wrapping in previous line.  The text before NoneClear DIV block also does not wrap the previous paragraph text. The text before LeftClear DIV block wraps the previous paragraph text so that the left portion of <P> tag content is clear and text goes to extreme right. The text before RightClear DIV block wraps the previous paragraph text so that the right portion of <P> tag content is clear and text goes to extreme left.