CSS Layout - Float and Clear
Although I use the float and clear properties I really need to know how they are supposed to work.
What the W3C website says about float:
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on which side.
The float Property
The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
In its simplest use, the float property can be used to wrap text around images.
- left - The element floats to the left of its container
- right - The element floats to the right of its container
- none - The element does not float (will be displayed just where it occurs in the text). This is default
- inherit - The element inherits the float value of its parent
This is an area that I don't thnk that W3C really explain things well. This also leads on to the Clearfix Hack
The clear property specifies what elements can float beside the cleared element and on which side.
The clear property can have one of the following values:
The most common way to use the clear property is after you have used a float property on an element.
When clearing floats, you should match the clear to the float: If an element is floated to the left,
then you should clear to the left.
Your floated element will continue to float, but the cleared element will appear below it on the web page.
- none - Allows floating elements on both sides. This is default
- left - No floating elements allowed on the left side
- right- No floating elements allowed on the right side
- both - No floating elements allowed on either the left or the right side
- inherit - The element inherits the clear value of its parent
I need more examples
The clear: left: example (w3C)
The following example clears the float to the left. Means that no floating elements are allowed on the left side (of the div):
There are 4 divs defined. div1 and 3 are the same. div2 and div4 are the same except that div4 has a clear: left;
div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.
div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".