Floats are a necessary part of web page layout, but unfortunately, it can be very challenging to work with them. It’s important to understand how floats work and the different methods in clearing them to get the results you’re after.
In this example we have an image and some text inside a div, and we would like the image to the left of that text. We float the image left so the text wraps around it. The problem is once we float the image the link moves up into remaining space under the text to the right of the image. We would like to ensure that link falls beneath the image and paragraph.
Let’s put a 1px red border on the div so we can see more clearly what is going on.
Even though the image is contained within the paragraph tags the border around the paragraph does not extend around the photo. This is because a floated element is removed from the normal flow of the page, so here it is now outside the paragraph and any other elements on the page.
There are several different methods to correct this display problem. One method is to use the CSS clear: left declaration. We could put that on the link if we make the link a block level element. We could also insert an element solely for the purpose of clearing such as a div or a br:
br style=”clear: left”
This method works well, although it will insert an extra space vertically so you may need extra CSS to remove the height. It also adds extra html for the sake of styling which is what we want to avoid in keeping with the separation of style and content principle of web design. Depending on the content you are working with this may or may not be the best choice.
Another method of correcting the problem is to use the overflow:hidden property on the containing paragraph. In this example this will work fine, but in different layouts you may have the unintended problem of content being hidden should it extend beyond the borders of the container. You might instead use overflow: auto which would ensure that all content be viewable, however it might end up inserting scrollbars where you don’t want them.
The :after Pseudo Selector
The :after pseudo selector is actually a CSS2 property, however it is getting more use with the launch of CSS3 and greater browser support. It is an easy way of clearing floats without the hassles of the above methods. Create a new class and give it a name such as the commonly used "clearfix" so this can be reused whenever needed. Apply the class to the containing div, and add the CSS as shown below:
This will add an element immediately following our div, so we need to make sure it isn’t visible. We give it a display:block property so that we may then use the clear property. We make sure the height is 0, and we also must use the content property in order for the content to actually be added to the page.
An interesting thing about this method is that content added via CSS is not part of the DOM. It’s not a good idea to add important content this way because it won’t be indexed by search engines and cannot be read by those using screen readers. Using it as a means of clearing a float, though, is perfectly acceptable.
View the demo page here.
For more information on clearing floats check out this screencast which demos many different examples of clearing floats in much more detail.