Welcome Login

Css: clear


The clear property lets you specify what elements can float beside the cleared element and on which side(s).

 

The clear property has five possible values:

Property values:

Value         Description

left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
none (default) Allows floating elements on both sides
inherit Specifies that the value of the clear property should be inherited from the parent element

 

 

Eg:

// css:
.clear
{
    clear: both;
}


// html:
<div class="clear"></div>

 

 

Eg2:

<html>
<head>
</head>
<body>
    <img src="happyface.png" alt="my image" style="float:left;">
    <p>Text next to my image.</p>
    <p style="clear:left;">Text that is below my image.</p> 
    </body>
</html>

 

Outputs:

css-clear1

 

 

All elements default to clear:none;, so if you don't want other elements to float beside something, you must change the clear style.

When you are clearing floats, you match your clear to your float. So if you floated the element to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element and everything after it will appear below it on the web page.

If you have elements that are floated to both the right and left, you can clear just one side or you can clear both.

 

For more information, see here.

 

 

 

<div class="clear"/> and <div class="clear"></div>:

Note: <div /> is not a valid markup. A self-closing tag is not permitted.

You need to use the full version <div></div>.

Also, a self closing div tag would make no sense, since it will result in an empty div. An empty div is usually not rendered by most of the browsers.

To avoid css layout issues, do not use: <div class="clear"/>


Created on: Thursday, September 6, 2012 by Andrew Sin