In this section, we will learn what the float property is and how to use it in CSS.

Click here to run the first example.

CSS float Property Definition and Usage

Elements in browsers sit next to or below each other depending on whether they are `inline` or `block` level elements, respectively.

For example, two <p> elements sit below each other because they are block-level elements. Or two <div> elements also behave like <p> element because it is a block-level element.

In the picture above we have 3 block level and 2 inline level elements.

Browsers start from the top-left position of the parent element and from that position, place the first child and then the next one below or next to the first element depending on whether it’s a block-level or inline-level element and then move on until the last element is placed.

If for any particular reason, the first child element gets removed from the page or its height or width decreased, then the entire elements on the page will be re-laid again in order to fill the created gap because of the changed occurred in the first element.

Here’s the layout in case of removing the first element:

Here’s the layout in case of resizing the first element:

This is the normal flow of how browsers place elements in a page.

But CSS provided a property named `float` by which we can detach an element from the normal flow and allow the document-flow to wrap around the floated element.

The purpose of floating an element is to create the common layout that we see in newspapers and magazines, which is: A paragraph wrapped around an element (usually a picture) and this element is usually on the right or left side of that paragraph.

When we float an element, browsers detach that element from the normal flow and relay the page as if that element didn’t exist. So basically, browsers fill the gap created by the floated element using other elements on the page.

But the interesting thing is that a floated element is still on the page but in a higher position!

Take a look at the picture below:

As you can see from the picture above, the red box is a floated element and the green box took its position and the content in this green box, wrapped around the red box. (Text can see a floated element and wrap around it but not their container)

CSS float Property Syntax

float: none|left|right|initial|inherit;

CSS float Property Value

Now let’s see the values that can be used for the `float` property:

• none: This is the default value and it makes the target element to not become a float element.

In the picture above, consider the three boxes as three <p> elements and they are placed below each other. All three elements follow browser’s normal flow.

• right: Using this property, the target element is detached from its position and moved horizontally towards the right side of its parent element until it touched the edge of the parent container or another floated element. (Remember, there’s no vertical movement! Floated elements just detach from their current position and move either right or left depending on the value we set for the float property. Also, if there’s not enough space for the floated element, in that case only, it will move one block down to take position in the next line)

Note: because the first element now is detached from the browser’s normal flow, the browser will relay the page and fill the gap created by the first element. (Also, notice that the element is in a higher position than the rest of non-floated elements)

• left: Using this property, the target element detaches from its current position and moves horizontally towards the left side of its parent element until it touches the edge or another floated element. (there’s no vertical movement)

Note: because the first element now detached from the browser’s normal flow, browser relayed the page and filled the gap created by the first element. But here, you can see the second element went under the first element and this happens because the floated element is detached (positioned at a higher level) and is not part of the browser’s normal flow anymore.

Example: CSS float left

See the Pen CSS float left by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS float Property Work?

The result is something like the picture below:

The first paragraph detached from the document’s normal flow (went at a higher position) and because there was a gap created by the first element, browser re-laid the rest of elements on the page and filled the gap. Now, the second paragraph went under the floated element and this is completely normal because a floated element is positioned at a higher level and elements in the document’s flow don’t see this floated element anymore. (The exception is their text content that can see the floated element and so the text content will wrap around the floated element)

Example: CSS float right

See the Pen CSS float right by Omid Dehghan (@enjoytutorials1) on CodePen.