CSS Float

What is CSS Float (floating)?

CSS float moves an element to the left or right, and the elements around it will also be rearranged.

Float is often used for images, but it is also very useful in layout.

How elements float

An element floating horizontally means that the element can only move left or right, not up or down.

A floated element will try to move as far left or right as possible, until its outer edge touches the border of the containing box or the border of another floated box.

Elements after the floating element will wrap around it.

Elements before the floated element will not be affected.

If the image is floated to the right, the following text flow will wrap around it on the left:

Example

img { float:right; }

Try it Yourself »

Floating elements next to each other

If you place several floated elements together, they will be adjacent to each other if there is space.

Here, we use the float property for the image gallery:

Example

.thumbnail { float:left; width:110px; height:90px; margin:5px; }

Try it Yourself »

Clearing Floats - Using clear

After an element is floated, the surrounding elements will be rearranged. To avoid this, use the clear property.

The clear property specifies that no floated elements can appear on either side of an element.

Add an image gallery to the text using the clear property:

Example

.text_line { clear:both; }

Try it Yourself »

More Examples

Add a border and margin to the image and float it to the right of the paragraph

Let's add a border and margin to the image and float it to the right side of the paragraph.

Title and image float to the right

Let the heading and image float to the right.

Make the first letter of the paragraph float to the left

Change the style so that the first letter of the paragraph floats to the left.

Create a web page without tables

Use float to create a webpage header, footer, left content, and main content.

All float properties in CSS

The numbers in the "CSS" column indicate the different CSS versions (CSS1 or CSS2) that define the property.

Property	Description	Value	CSS
clear	Specifies that floating elements are not allowed around the element.	left right both none inherit	1
float	Specifies whether a box (element) can float.	left right none inherit	1

other extensions