Float

CSS Float Summary

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

.image {
	float: left;
	margin-right: 20px;
}

What Float Does

Float was often used to build layouts before flexbox and grid became common. Today, float is mostly used for wrapping text around an image or small box.

When an element is floated left, it moves to the left side of its container. Text can then flow around the right side of it.

Float Left

float: left; moves an element to the left. It is commonly paired with margin on the right so the text does not touch the floated element.

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

Float Right

float: right; moves an element to the right. It is commonly paired with margin on the left.

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

Floats And Page Flow

A floated element can affect the elements that come after it. Sometimes the next section may move up beside the float when you do not want it to.

When that happens, clear: both; can be used on the next section to force it below the float.

.next-section {
	clear: both;
}

Use Float Carefully

For modern page layouts, flexbox and grid are usually better. Float is still useful when the goal is to let text wrap around an image or small box.