clear property:
The clear property lets you specify what elements can float beside the cleared element and on which side(s).
Property values:
The clear property has 5 possible 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
All elements default to clear:none;
So, if you do not 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.
Examples:
Eg: clear both:
// css:
.clear
{
clear: both;
}
// html:
<div class="clear"></div>
Eg2: clear left:
<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:
Eg3: alternatively, you can just set float to none on page for a specific element.
In example, that element is a telerik grid header:
// view:
.k-grid-header {
float: none !important;
}
<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"/>
For more information, see here.
