HTML Div CSS Clear Style
CSS Style clear property works as a structure formatter for HTML Div based webpage layouts. CSS Clear style property enables you to create the inline div tags or set the logical line break for the follow up HTML div tags. When you use float CSS style property to set the nested Div float position left or right its appearance comes out with different attitude in different web browsers. IE 6, IE7, FireFox and Opera all web browsers render the floating div positions for the nested as well as parent div tag differently. Mostly outer div collapses when nested div is used with CSS float property. Collapsing occurs because browsers could not render the logical block property corresponding to the height of the div <div> tags to expand the outer div based on the height of nested div. Clear property of CSS styles logically defines the end point of div tag just after which it is applied.
CSS Div Clear Examples:
From the following links you can view the live samples of Div Clear styles using CSS:
CSS Clear Style Property
clear: clear CSS style property accepts three types of values such as left, right and both.
left: left value for the CSS clear property clears the div with CSS float property with value left. It does not allow the inline div tags towards the right side after the div tag with clear property value left.
right: right value for the CSS clear property clears the div with CSS float property with value right. It does not allow the inline div tags towards the left side after the div tag with clear property value right.
both: value both for the CSS clear style property does not allow the inline div tags at any of the left or right side of the HTML div tag assigned with clear both property value.
Example of HTML Div CSS clear style
<html>
<head>
<title>HTML Div Clear</title>
<style type="text/css">
.outerDiv {
border: solid 2px #000000;
width: 312px;
}
.innerDivLeft {
border: solid 2px #FF0000;
width: 100px;
float: left;
}
.innerDivRight {
border: solid 2px #FF0000;
width: 100px;
float: right;
}
.divClear {
clear: both;
}
.Clear-left {
clear: left;
}
.Clear-right {
clear: right;
}
</style>
</head>
<body>
<h3>Without using Clear CSS property</h3>
<div class="outerDiv">
<div class="innerDivLeft">
Text inside div1
</div>
<div class="innerDivLeft">
Text inside div2
</div>
<div class="innerDivLeft">
Text inside div3
</div>
</div>
<br />
<br />
<h3>Using Clear : Both CSS property</h3>
<div class="outerDiv">
<div class="innerDivLeft">
Text inside div1
</div>
<div class="innerDivLeft">
Text inside div2
</div>
<div class="innerDivLeft">
Text inside div3
</div>
<div class="divClear">
</div>
</div>
<br />
<br />
<h3>Using Clear : left CSS property</h3>
<div class="outerDiv">
<div class="innerDivLeft">
Text inside div1
</div>
<div class="Clear-left">
</div>
<div class="innerDivLeft">
Text inside div2
</div>
<div class="Clear-left">
</div>
<div class="innerDivLeft">
Text inside div3
</div>
<div class="Clear-left">
</div>
</div>
<br />
<br />
<h3>Using Clear : left CSS property</h3>
<div class="outerDiv">
<div class="innerDivLeft">
Text inside div1
</div>
<div class="Clear-left">
</div>
<div class="innerDivLeft">
Text inside div2
</div>
<div class="Clear-left">
</div>
<div class="innerDivLeft">
Text inside div3
</div>
</div>
<br />
<br />
<h3>Using Clear : right CSS property</h3>
<div class="outerDiv">
<div class="innerDivRight">
Text inside div1
</div>
<div class="Clear-right">
</div>
<div class="innerDivRight">
Text inside div1
</div>
<div class="Clear-right">
</div>
<div class="innerDivRight">
Text inside div1
</div>
<div class="Clear-right">
</div>
</div>
<br />
<br />
<h3>Using Clear : right CSS property</h3>
<div class="outerDiv">
<div class="innerDivRight">
Text inside div1
</div>
<div class="Clear-right">
</div>
<div class="innerDivRight">
Text inside div1
</div>
<div class="Clear-right">
</div>
<div class="innerDivRight">
Text inside div1
</div>
</div>
</body>
</html>
Above example code will show you that without using the clear CSS property outer div collapses. Using Clear both CSS property after the last nested div element defines the logical height of the inner div tags that will not allow the outer div tag to collapse.
Using Clear left after each div tag having float left CSS property will display the div tags without collapsing. If you will skip using the clear left CSS property after the last nested div element then it will be assumed as null element by the browser and it will display the outer div boundary closed before the last nested child div tag with float left CSS property.
Using Clear right after each div tag having float right CSS property will display the div tags without collapsing. If you will skip using the clear right CSS property after the last nested div element then it will be assumed as null element by the browser and it will display the outer div boundary closed before the last nested child div tag with float right CSS property.
Copy the above HTML code for Div CSS clear style and browse the web page in FireFox to test the different types of uses of CSS clear style property.
Output:
Get the output of above discussed code from the following links:
Continue to next tutorial: HTML CSS style div position relative to learn Div positioning using CSS Position property.
