CSS Float Property - Closing Floats

This post 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.

The example below shows what typical problems floats can create and what we can do in order to solve those problems.

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<style>
	#float {
		float: left;
		width: 150px;
		background-color: pink; 
		padding: 10px; 
		margin: 10px; 
	}
	div {
		border: 1px solid black; 
		margin: 10px; 
	}
</style>

</head>

<body>
	<div id="div1">
		<p id="float">Text inside the floated div. Text inside the floated div. Text inside the floated div. Text inside the floated div. Text inside the floated div. Text inside the floated div.</p>
		<p>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>

As the HTML code shows, there are two divs in this document. #div1 contains two paragraphs and #div2, one paragraph. The first paragraph in #div1, in this document called p#float has been floated to left having a fixed width of 150px. The width has been defined for the p so that we can see the effect of floating in this example. Instead of the p with the fixed width, you could imagine any element having a fixed width, for example an img that always has width. 

A very thin border has been defined for the divs so that you can see the contours of every div. 

As you can see, p#float has been positioned to the far left in the viewport. The second p in #div1 is floating around p#float. 

The important thing here is that p#float is not being contained by #div1 as it's normally the case with not floated elements. p#float runs over the border of #div1 and even over the border of #div2. 

The content inside #div2 is also floating around p#float.

The problem I'm trying to illustrate here is that p#float does not remain inside its parent element. It runs over the border of the div and also influences the flow of content in other parts of the document. 

This example is very similar to a picture gallery for instance. Imagine, instead of p#float, you had an image and the second paragraph inside #div1 was a description for the image. Then imagine you had as many such divs in this documents as the number of the pictures in your picture gallery. Images from one container (div) would run over to other divs and you would have no control over the layout of your picture gallery. 

In order to solve this problem, the float needs to be cleared. Take a look at the following solution.

<html>

<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<style>
	#float {
		float: left;
		width: 150px;
		background-color: pink; 
		padding: 10px; 
		margin: 10px; 
	}
	div {
		border: 1px solid black; 
		margin: 10px; 
	}
</style>

</head>

<body>
	<div id="div1">
		<p id="float">Text inside the floated div. Text inside the floated div. Text inside the floated div. Text inside the floated div. Text inside the floated div. Text inside the floated div.</p>
		<p>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>
		<br style="clear: both;" />
	</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>

The solution was that we added an element, in this case a "br" to the end of the div that contained the floated element and gave it an inline CSS style of "clear: both;". The result is that the floated element is now properly contained in its parent element and won't break the layout anymore.

The intention of this article is not to get too technical about how this solution works although a short explanation might help you head in the right direction and do your own research on this. 

In order to understand the problem first and then the solution, you need to understand the concept of block formatting context in CSS. The term Block Formatting Context or in short BFC refers to the natural flow of elements in the viewport ruled by the browser. Normally when you have some elements in your HTML markup, the browser takes note of them and renders them in the normal flow of elements in the viewport. For example, block level elements take up the whole veiwport width whether or not their content is as wide as the viewport width; inline elements take as much width as their content requires; certain elements are rendered and positioned in certain ways and so on and so forth. And the whole thing is basically done by the browser automatically. 

Now, when you create an HTML document, one single BFC is created, like an imaginary river in which all elements under the root element html can swim. The browser is responsible to make sure that they don't drown. Drowning here refers to such problems as the problem we had formerly with the div running out of its parent element. 

As a result of certain things like floating, a new BFC is created, other than the one that's automatically created by html. And such problems like the one we had where the flow of the content of #div2 was influenced by p#float are created because of the new BFC. 

Now in order to solve such problems, you need to take those elements, like the content of #div2, out of the second BFC that was created as a result of floating. In order to take those elements out of the second BFC, you need to create a new BFC manually and put those elements in the third one. The act of adding an element at the end of #div1 and then clearing it practically creates a new BFC, namely the third one. And so the content of #div2 now lives in the third BFC, not in second one anymore and so it's not influenced by the float anymore. 

Here we used a br and then cleared that in order to create a new BFC and solve the problem. Instead of the br, you can use anything and clear it. For example, you can create an hr and then clear it. Whatever works for you but since you don't want the element to have a visual representation in the viewport, we chose a br here. There are some popular solutions to clear floats. We'll talk about them each.

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: