Learn how to build and design websites with our tutorials.

CSS Float And Clear Tutorial

View Tutorial Contents


This CSS tutorial will go over the float and clear properties and explain how they are used to set the flow of HTML elements.

One of common uses of the float and clear properties is to float images (and/or other elements) so that the content flows how you want. This is what this tutorial will cover. Another common use of the float and clear properties is to position the layout of elements that contains other elements, for example, left and right columns. Although the principles are the exact same, that will be covered in another tutorial specifically aimed at how to layout your web pages.

The CSS Float Property

The CSS float property moves, or "floats", HTML elements to either the left of the right side, and the surrounding content wraps around it.

The table below lists the values of the float property.

Property Value
float left, right, none (default value)

Static Positioning

The code below is of a paragraph that begins with text and is followed by three images, each positioned in their default static position. Because this the default position of elements, you do not have to specify the float property for the element.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

img{
margin: 	0;
padding: 	0;
border: 	none;
}

</style>

</head>
<body>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
<img src="../images/circle-circle.png" alt="image" />
<img src="../images/circle-square.png" alt="image" />
<img src="../images/circle-diamond.png" alt="image" />
</p>

</body>
</html>

The paragraph with the three images below are in their default static position is shown below.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. image image image


Floating Elements To The Left

The code below is of a paragraph that begins with text and is followed by three images. Two of the images have a float property with a value of left applied to them.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

img{
margin: 	0;
padding: 	0;
border: 	none;
}
img.left{
float: left;
margin: 	0;
padding: 	0;
border: 	none;
}

</style>

</head>
<body>

<p>
This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.
This is another paragraph. This is another paragraph.
<img src="../images/circle-circle.png" alt="image" class="left" />
<img src="../images/circle-square.png" alt="image" class="left" />
<img src="../images/circle-diamond.png" alt="image" />
</p>

</body>
</html>

The first two images have a float property with a value of left. The third one has its default static position.

This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. image image image


Floating Elements To The Right

The code below is of a paragraph that begins with text and is followed by three images. The first two images have a float property with a value of right applied to them.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

img{
margin: 	0;
padding: 	0;
border: 	none;
}
img.right{
float: right;
margin: 	0;
padding: 	0;
border: 	none;
}

</style>

</head>
<body>

<p>
This is yet another paragraph. This is yet another paragraph. This is yet another paragraph. This is yet another paragraph.
This is yet another paragraph. This is yet another paragraph.
<img src="../images/circle-circle.png" alt="image" class="right" />
<img src="../images/circle-square.png" alt="image" class="right" />
<img src="../images/circle-diamond.png" alt="image" />
</p>

</body>
</html>

The first two images have a float property with a value of right. The third one has its default static position.

This is yet another paragraph. This is yet another paragraph. This is yet another paragraph. This is yet another paragraph. This is yet another paragraph. This is yet another paragraph. image image image


Clearing Floats

Sometimes you will want to cancel the effects of the float property. The CSS clear property is used to cancel the effects of the float property.

The table below lists the clear property and its possible values

Property Value
clear none (initial value), left, right, both

The code below outputs two paragraphs and shows you an example of when you might want to cancel the effects of the float property.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

img{
margin: 	0;
padding: 	0;
border: 	none;
}
img.left{
float: right;
margin: 	0;
padding: 	0;
border: 	none;
}
img.right{
float: right;
margin: 	0;
padding: 	0;
border: 	none;
}

</style>

</head>
<body>

<p>
<img src="../images/circle-circle.png" alt="image" class="left" />
<img src="../images/circle-square.png" alt="image" class="left" />
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.
</p>

<p>
<img src="../images/circle-circle.png" alt="image" class="x-img-right" />
<img src="../images/circle-square.png" alt="image" class="x-img-right" />
This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another
paragraph. This is another paragraph.
</p>

</body>
</html>

image image This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

image image This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.

We can use the clear property with a value of both to cancel the effects of the float property that is applied to the images in the first paragraph. To do this, I have used an empty <div> element and applied a class to it.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

img{
margin: 	0;
padding: 	0;
border: 	none;
}
img.left{
float: right;
margin: 	0;
padding: 	0;
border: 	none;
}
img.right{
float: right;
margin: 	0;
padding: 	0;
border: 	none;
}
.clear{
clear:	both;
}

</style>

</head>
<body>

<p>
<img src="../images/circle-circle.png" alt="image" class="left" />
<img src="../images/circle-square.png" alt="image" class="left" />
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.
</p>

<div class="clear"></div>

<p>
<img src="../images/circle-circle.png" alt="image" class="x-img-right" />
<img src="../images/circle-square.png" alt="image" class="x-img-right" />
This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another
paragraph. This is another paragraph.
</p>

</body>
</html>

image image This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

image image This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.