The CSS float property can make HTML elements float to the left or right inside their parent element. Content inside the same parent element will move up and wrap around the floating element. In this CSS float tutorial, we will learn how the CSS float property works in more detail.

To illustrate how the CSS float property works, let’s take a look at the HTML example in this repl.it:

The HTML code contains a div element which has a text, two additional div elements, and another text inside its body.

In the following sections, you will see how to make the two nested div elements float left and right inside their parent element using the CSS float property.

float: left

Now, we will make the first nested div element float left using the float CSS property. We do so by setting the CSS float property of the HTML element to the value left. Here is an example showing a div element with the CSS float property set to left. Take a look at this repl.it:

Notice how the first div element (with the red border) now floats to the left inside its parent element? The first text is now wrapping nicely around the first div element, to the right of it. The second div element is still positioned below the first div element, and the last text below that.

Now, let us try to make the second nested div float left as well. Here is what the code looks like in this repl.it:

As you can now see, both the first and second nested div elements are floating to the left inside their parent element. The text wraps nicely around the two floating elements.

float: right

Now let us try to make the second nested div element float to the right instead. We do so by setting its float CSS property to the right instead of to the left. Here is our code example in this repl.it:

See how the two div elements are now floating on each side inside their parent element? They are evenly located at the same vertical position (towards the top of the parent element). The text now wraps around the two div elements by being rendered between the div elements.

clear

Now, let us add a third div element which also floats left. Take a look at this repl.it:

Notice how the two left floating elements are positioned on the same horizontal “line”, one after the other?

Imagine now that you want the two div elements with the red borders to float left, but under each other instead of next to each other. To do that, you need to set the CSS clear property.

The CSS clear property can take one of these values:

left
right
both
none

The left value means that the element should stay clear of all left floating elements. The right value means that the element should stay clear of all right floating elements. The both value means that the element should stay clear of both left and right floating elements. The none value means no clearing, which is the same as leaving out the CSS clear property.

Let us set the CSS clear property of the last div element that is currently floating left. As a result, while the last div element should still float left, it will stay clear of the first left floating div element. Here is how the example code looks like in this repl.it:

Now the last div element still floats left, but stays under (clear of) the first left floating div element.

Previous CheckPoint

Back to Chapter

Next CheckPoint