Float

CSS Float Summary

Float moves an element to the left or right so nearby inline content can wrap around it.

img {
	float: left;
	margin-right: 16px;
}

Float was once used for whole page layouts. Modern CSS usually uses Flexbox or Grid for layout instead. Float is still useful for wrapping text around an image.

Float Pulls An Element To One Side

A floated element moves to the left or right of its container. Text and inline content can flow beside it.

.photo {
	float: right;
	margin-left: 20px;
	width: 200px;
}

The margin creates space between the image and the text that wraps around it.

Clear Stops Wrapping

The clear property prevents an element from sitting beside a floated element.

.next-section {
	clear: both;
}

The Clear lesson explains this relationship in more detail.

Use Modern Layout For Page Structure

Use float for simple text wrapping. Use Flexbox or Grid when you need to arrange page sections, cards, columns, or navigation.