Floats

A 'float' allows an element to remain on one side or the other, regardless of the size of the window or viewport. Text will wrap around a floated element and continually adjust around it as you resize the window.

Floats are often used for page layout.

img {
	float: left;		[left, right or none]
	}	
		

If more than one element is floated in the same direction, the later one will be located next to the earlier one. If there is insufficient width to display them side-by-side, then the later one will be placed underneath.

Clearing floats

This applies to an element that follows a floated element. Specify 'clear: both' if you'd like a selected element to always start on a new line when following a floated element (rather than trying to wrap around it, with unexpected results).

.classname {
	clear: both;			
	}		
		

Example

The example paragraph below has three images surrounded by text. One of the images is 'right floated', one is not floated and the other is 'left floated'.

The code for the three images is buried in the HTML on the left. Don't worry about understanding the HTML, just note the class for each image, which is highlighted. The classes are 'movetoright', 'nofloat' and 'movetoleft' (names that I just made up). In the CSS, on the right, you will see the styling for each of those classes, which is (you guessed it!) right float, 'none' and left float respectively. You can see the result in the box down the bottom.

<p>
Araucaria cunninghamii is a species of Araucaria known as 'hoop pine'. Other less commonly<img src="../images/hoop_pine.jpg" class="movetoright"> used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s. Araucaria cunninghamii is a species of Araucaria known as 'hoop pine'. Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine.<img src="../images/hoop_pine.jpg" class="nofloat"> The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s. Araucaria cunninghamii is a species of Araucaria known as 'hoop pine'. <img src="../images/hoop_pine.jpg" class="movetoleft"> Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s. Araucaria cunninghamii is a species of Araucaria known as 'hoop pine'. Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s.
</p>
								

.movetoright {
	float: right;
	}

.nofloat {	     
	float: none;
	}																

.movetoleft {
	float: left;
	}
								

Resize the window to see what happens. Note how the text wraps around the floated images, and how they remain on the specified side. In the case of the image without a float, the text doesn't wrap and the image moves with the text.