How to Use the CSS Float Property

The CSS float property causes an element to be positioned along the left edge or the right edge of its container. The float property can be applied to any element that is not absolutely positioned.

Possible values of the float property are:

left
right
none

When an element floats left it will be aligned to the left of the containing element and all subsequent content will align to its right until the bottom of the element is reached, as shown in this example:
float left example

When an element floats right it will be aligned to the right of the containing element and all subsequent content will align to its left until the bottom of the element is reached, as shown in this example:
float left example

The code used to create the results above is shown below:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Float</title>
<style type="text/css">
	.container {
		width: 150px;
		border: 2px solid #000;
	}
	.floatLeft {
		float: left;
	}
	.floatRight {
		float: right;
	}
</style>
</head>
<body>
<h2>Float Left</h2>
<div class="container">
	<img src="Images/block.gif" class="floatLeft">
	<p>This is just text. This is just text. This is just text.
		This is just text. This is just text.</p>
</div>
<h2>Float Right</h2>
<div class="container">
	<img src="Images/block.gif" class="floatRight">
	<p>This is just text. This is just text. This is just text.
		This is just text. This is just text.</p>
</div>
</body>
</html>