CSS Float Property - Clearing Floats - overflow: hidden;

This a technique used to solve the typical float problem

Using overflow: hidden; on a container box that contains floated elements is one of the ways you can use to get the container to enclose the floated elements. In this article, we're going to learn this technique.

Here's how a typical HTML document with the solution implemented would look like: 

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<style>
img {
	float: left; 
	margin-right: 10px; 
}
div#div1 {
	overflow: hidden; 
}
</style>

</head>

<body>
	<div id="div1">
		<p><img src="picture.png" width="200" height="250">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
	</div>
	<div id="div2">
		<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
	</div>
</body>

</html>

 

Here's a screen shot of the code in Firefox:

As you can see, img is inside div#div1 and it's been floated to left. div#div1 has been given the CSS rule, "overflow: hidden;".

As a result, div#div1 contains the floated img and the p inside it without any problems. div#div2 starts from below div#div1 (from below the img) and the flow of the p inside div#div2 is not being influenced by the floated img.

Why This Technique Works

The CSS overflow property defines what should happen to the content of a box if the box, for any possible reason, cannot contain its content. For example, normally a block level element like a div stretches to occupy the whole width of the viewport and all the way down until it's wide and long enough to contain all the content inside it, for example a few long paragraphs inside it. But if you restrict the width or the height of the div for any reason, for example for the sake of your layout, there might be some point where there's not enough room for all of the content inside the div. So then, you need to let the browser know what it should do with the excess content. Should the excess content fly out of the div, should it be clipped out, etc. The CSS overflow property does exactly that for you. It tells the browser what to do with the excess content. There are some possible values for the CSS overflow property as follows:

  • visible - the overflow renders outside the element's box. This is the default value.
  • hidden - the overflow is clipped and the rest of the content will be invisible. 
  • scroll - the overflow is clipped out but a scroll bar is added. You would be able to scroll up and down, to the right and left to see the rest of the content. 
  • auto - the browser decides what value to set for the overflow property. It's almost always scroll. 
  • initial - sets the value of this property to its default value which is visible. 
  • inherit - the value for the property will be inherited from the parent element. 

The reason why overflow: hidden; helps with the float problem is that the CSS overflow property with any of the values "hidden", "scroll" or "auto" creates a new BFC (Block Formatting Context). Since you have created a new BFC, all the floated elements are going to be enclosed in that BFC. It's like the other technique that we used to solve the same problem, namely, floating the container. Floating the container does the same thing too. It creates a new BFC and as a result, all the floated elements will be enclosed in the new BFC.

The CSS overflow property with values "hidden", "scroll" or "auto" is in no way intended to be used to solve this kind of problem. It's just that it creates a new BFC with those three values that web designers use it for that purpose sometimes.

So basically, you can do anything that creates a new BFC and your float problem will be automatically taken care of. But you need to be careful about the actual consequences of what you're doing. For example, if you set the overflow property of a box to "hidden" to solve your float problem, if the box for any reason is not able to accommodate the content inside it, the content will be simply clipped out and will not be available on the website anymore. Moreover, whatever you do needs to be compliant with your overall layout and every part and component of it as well. In short if a layout with all the content inside it has no problems, that basically means that everything done in the whole website is compliant with every other part and component of the website.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the "float" CSS property. You can take this course with us at the following address: