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
address {
clear: both
}
some test
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.
5 Responses
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!
It is very usefule while using multiple float elements.
When you do a design don’t froget to fix error template/float…
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?
Been thinking some more about this,
‘float’ is the command so it should have at least the following variables :
float: left;
float: center;
float: right;
float: clear-left;
float: clear-center;
float: clear-right;
float: clear;
The latter clears all. This would be far more sensible than my comment yesterday.