Using The HTML Div CSS Clear Style

[ITsoldUK]

I often get asked how and why do I use a DIV CLEAR? So here goes...

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 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.

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.