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.
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.
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
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 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