CSS Float Property - Clearing Floats - Floating the Container Containing the Float

This article is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don't take the course but that's primarily not the goal of this post. 

This technique is a solution to solve the typical float problem

Let's take a look at this example:

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<style>
img {
	float: left; 
	margin-right: 10px; 
}
div {
	background-color: #DBD9D9; 
	padding: 10px; 
	margin: 10px; 
	border: 1px solid black; 
	border-radius: 5px; 
}
</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><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="div3">
		<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>
</body>

</html>

This could be an image gallery. There are three divs here. In each of the divs, there's an "img" and a "p". The "img" has been floated to left so that the text wraps around the "img". A screen shot of this in Firefox would look like the following: 

As you can see, the images have not been contained by the respective containing divs and they have simply flown out of those divs. Moreover, the flow of content in each consecutive div is being influenced by the floated image in the previous div. This needs to be taken care of. To be more exact, the floats have to cleared so that each floated image remains inside its own div and so the image gallery is usable. 

One way to clear floats is to float the container that contains the floated element or elements, in this particular case, div#div1, div#div2 and div#div3. So if we float each of those divs as well, the floated images will be taken care of but then of course you have three more floated divs to take care of and that depends on your layout. In any case, floating the containing divs will clear the floated images. Let's see how that works. 

div {
	float: left; 
}

The line of code has been added to the style block in the head of the document above. Here's a screen shot of the code in Firefox: 

You could give each of those floated divs a fixed width in which case it'd look like the following:

div {
	float: left; 
	width: 30%;
}

 

The reason why this technique works is that when you float an element, you're basically creating a new BFC (see this article for an explanation of BFC) and the floated element will be enclosed by the new BFC. Generally, a floated element encloses all floated elements inside it. 

Using this technique, you need to be careful since you're floating almost every div on the page. That could create drastic problems in your overall layout. 

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: