CSS Float Property - Clearing Floats - Add an Element and Clear it

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.

In order to clear floated elements, you can add an element at the end of the container containing the floated element and then clear that element. For example, if you had a floated image inside a div, you could add a simple br element to the end of the div in your HTML markup and then clear that br in your CSS. Your visitors would not see the br in your pages but it would clear the floated image. You could use any other element instead of the br. The point is that you need to have any "cleared" element at the end of the div so that the height of div is decided by the last "cleared" element inside the div.

The code looks like the following:

<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; 
}
.clearing { clear: both; }
</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>
		<br class="clearing" />
	</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>
		<br class="clearing" />
	</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>
		<br class="clearing" />
	</div>
</body>

</html>

For this example, I have added a simple br to the end of each div containing a floated img and given it the class, ".clearing". In the CSS style block in the head of the document, I have defined, "clear: both" for the class .clearing.

The problem here is that you'd have to add HTML elements manually every time you face such a situation. Moreover, the HTML element that you'd add, might not be semantic. 

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: