CSS CLEAR

This property specifies whether the current element allows floated elements occuring earlier in the document to float along its sides. The values for this property indicate which sides of the element do not allow floating elements. If the current element has any floating sub-elements, the property does not apply to them.

Example

123

address {clear:both}

1

<span style="clear: both">some test</span>

Possible Values

inherit: Explicitly sets the value of this property to that of the parent.none: No restriction is made on floating element placement behavior.left: The current element is shifted such that the top edge of the top margin is below the bottom edge of any left-floated elements previously occuring in the document.right: The current element is shifted such that the top edge of the top margin is below the bottom edge of any right-floated elements previously occuring in the document.both: The current element is shifted such that the top edge of the top margin is below the bottom edge of any floated elements previously occuring in the document.

http://www.scottrageous.com Scott

Let’s implement a float-clearing property while we’re at it (like clearing:floats/none/etc), so that float clearing is much simpler, less “hacky”.

Floats are here to stay, so the only other way I see around it is to add a float-clearing:clear; or similar option that assigns the property to the floated element.

“But what about overflow?” you ask? Well, it’s still pretty hacky, as using it makes printing pages less desirable for long overflown elements, such as the container, or main/sidebar columns. Print stylesheets are the solution here, but what do you do if you want to have overflow:visible on floated elements for those long urls that happen on occasion, or to be able to show dropdown menus on floated navbars?

So yes, we need a float-clearable property in CSS3!

Nits

It is very usefule while using multiple float elements.

http://www.mypixhell.com Ludovic

When you do a design don’t froget to fix error template/float…

http://www.computours.org/ Malcolm Beeson

It is essential to have a method of clearing floats, but I’ve no idea how you get these things included,

clear: both;

seems simple enough, why can’t we keep it?

http://www.computours.org/ Malcolm Beeson

Been thinking some more about this,

‘float’ is the command so it should have at least the following variables :