How to combat float leakage

Float leakage is when one or more floats applied to a child element, leak out of the parent element and affect neighbouring elements on the page. A common example is when you have images floated side by side in a div and the float on the last image leaks out because the div doesn't properly contain the images. The cause of float leakage is always down to a parent element not recognising that it has content and allowing a float to "escape".

There is another issue involving floats effecting other elements, but this isn't to do with floats "leaking". It is to do with floats needing to be cleared. I will explain this below, but first, let's see how to combat float leakage.

Float leakage in action

Example

In the example below, we have a container called floatExample1 which has a background-color of #FC6, and inside this we have two images. As you can see, our page renders as if the container doesn't exist. This is obvious by the paragraph below floatExample1 floating next to the images and by our background-color not displaying.

CSS Code:

        #floatExample1 {
			background-color:#FC6;
		}

        #floatExample1 img {
            float:left;
        }
        
        #testCaption {
        	font-size:120%;
            font-style:italic;
        }
        

(X)HTML Code:

            <div id="floatExample1">
            	<img src="../images/chris-redfield.jpg" alt="Chris Redfield from Resident Evil 5" />
            	<img src="../images/leon-kennedy.jpg" alt="Leon S. Kennedy from Resident Evil 4" />
            </div>
            <p id="testCaption">This text is supposed to be underneath floatExample1, but it is not. It is, in fact, floating next to the images.</p>
        

Result:

This text is supposed to be underneath floatExample1, but it is not. It is, in fact, floating next to the images.

Images © Capcom

Disaster! floatExample1 doesn't appear to exist, and the float on the last image has escaped and is causing the captionExample to float next to it.

Combating float leakage

The solution to preventing floats from leaking out is to apply overflow:auto to the parent element; if you still support IE6, you will also need to apply height:100%.

CSS Code:

        #floatExample2 {
			background-color:#FC6;
            overflow:auto;
		}

        #floatExample2 img {
            float:left;
        }
        
        #testCaption {
        	font-size:120%;
            font-style:italic;
        }
        

(X)HTML Code:

            <div id="floatExample2">
            	<img src="../images/chris-redfield.jpg" alt="Chris Redfield from Resident Evil 5" />
            	<img src="../images/leon-kennedy.jpg" alt="Leon S. Kennedy from Resident Evil 4" />
            </div>
            <p id="testCaption">This text is supposed to be underneath floatExample2...and it is!</p>
        

Result:

This text is supposed to be underneath floatExample2...and it is!

Images © Capcom

Now that we have the overflow:auto on the floatExample2 container, it is being rendered...as is evident by the lovely orange background. The float on our last image is now contained and doesn't leak out.

If the container isn't necessary, what do you do?

If you have a container around an element, but it isn't serving a purpose, you might as well delete it. But, if you delete your container you will find that the float on your last element will now be free to wreak havoc on your page. So, how do you stop floats from messing up a page if you don't want to use a container to hold them in? Simple. You use the clear property.

Example of clear:left

The example above doesn't really need a div surrounding it, so we'll remove the container and apply a clear:left to testCaption. The clear:left clears all floats to the left of testCaption.

CSS Code:

        .floatEx {
        	float:left;
        }
            
        #testCaption {
        	font-size:120%;
        	font-style:italic;
        	clear:left;
        }
        

(X)HTML Code:

           
            <img src="../images/chris-redfield.jpg" alt="Chris Redfield from Resident Evil 5" />
            <img src="../images/leon-kennedy.jpg" alt="Leon S. Kennedy from Resident Evil 4" />            
            <p id="testCaption"<This text is supposed to be underneath the images...and it is!</p>
        

Result:

This text is supposed to be underneath the images...and it is!

Images © Capcom

Our images can now be floated next to each other, without the need for a container, and they will no longer screw up our page. If you'd like to know more about the clear property, check out How to eliminate unnecessary tags by using CSS clear property.