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 }
<address style=”clear: both”>some test</address> |
Possible Values
| Value | Description |
|---|---|
| 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. |
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!