Sun Dial Menu
CSS Float and Clear
tempusfugit.me.uk
 

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:

  • 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
In its simplest use, the float property can be used to wrap text around images. "

Top Menu

Clear

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:

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

I need more examples

Top Menu

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;

Without clear

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


With clear

div3
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".
Top Menu

Site design by Tempusfugit Web Design -