Clearing floats with the overflow property

Using the float property is a fundamental part of the tools that we use as web designers/developers when wrangling with CSS. Floating an image is probably one of the most common tasks when we want to align the image either left or right within a containing block [div or paragraph]. However, use of the float property comes with its own problems and chief amongst these is that often we need to ‘clear the float’ so that other elements [often the element that contains the floated element] behave in the way that we want.

The method that I have been using more and more recently is to add the overflow property, either overflow:hidden or overflow:auto, to my containing element. This is a simple way of clearing floats that seems to work well when you are using a floated image inside another element that needs to be cleared.

Here’s an example that shows what I mean. For the first paragraph, the image is floated right, the text is quite short, and the containing coloured background paragraph does not ‘know’ what height to use. As a result, the image ‘sticks out the bottom’ of the paragraph. Mostly this is not what I want to see. The floated element needs to be cleared so that the height accurately encompasses the floated image.

In the second case, the styles are the same and the image is floated right but I have added overflow:hidden to the containing paragraph element. As a result of this simple change, the height of the paragraph is what we intended. The float is cleared.

Here are the image styles in the example:

.image-right {
	margin: 10px;
	padding: 5px;
	background: #FFF;
	float: right;
	border: 1px solid #E0E0E0;
}

.. and the paragraph styles.

.box1, .box2 { 
	background: #E7F3CF;
	padding: 10px;
	margin-bottom: 150px; 
}
.box2 { 
	overflow: hidden;
}

Using the overflow property like this is a quick way of clearing the float without adding extra mark-up.

There are several other ways of clearing floats which I will not elaborate on here. However, All About Floats on the CSS Tricks website is a great article that explains more about floats and clearing.

Note: I don’t pretend that this method will work in all cases. Your layout and older browsers like IE6 may dictate that you need to tweak the above or use another method for clearing floats. Floating the containing element [float to clear a float] or adding another element that clears the float are two methods that may work just as well. Use the best method for your particular circumstances.

Technorati : css