CSS Layout - Float and Clear

Over the years that I have been developing templates for my page layouts I have "wrestled" with the Clear and Float behaviour in a CSS layout.

I have now moved my design to one that uses the W3C.css Framework - the issues of using Float and Clear are pretty much taken care of by the framework. However, I do think that this topic still needs to be discussed as there are still instances where you still need to be aware of the implications of their use.

I have left a page on this website using the old template in which you can see what happens if you don't clear floats correctly. This is easy to do when you are modifying a page and your page becomes corrupted.

This page:

When positioning elements on an HTML layout there are situations where a float or a clear is needed.

I have added some examples showing the consequences of where a clear is needed after an element had been floated.

There is also a "hack" called clearfix to clear child elements automatically.

Considerations for taking float and clear into account is somewhat taken care of if you use a CSS Framework to design your layouts.

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

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

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

Background to this page

Although I use the float and clear properties I really need to know how they are supposed to work. This page is my notes for these properties.

Reviewing this page and seeing that there are many searching for information in this area, I have added more links and code examples.

If you are reading this and things still don't make sense I encourage you to have patience and delve deeper. Looking back on my own development of a template I see how and why I made the mistakes I made in the past and how I corrected them.

My older design for a template used CSS that I modified over the years not really knowing exactly what I was doing. Much was copied from other designs and adapted. While there is nothing wrong with this technique in many cases it is not easy to see why things are working (or not) they way that you want.

The use of a CSS Pseudo Element ::after did not help in my understanding!