Originally, the float property was used to take an HTML element (usually an image) out of the normal flow of the webpage and make it float on top of other elements. But then developers quickly realized you can use float to design entire webpage layouts, so that multiple columns of information could sit next to each other.
However, with the creation of modern layout techniques such as grid and flexbox, float gradually returned to its original purpose.
Float
Here is an example of using float:
As you can see, the <div> element is taken out of the normal flow of the webpage, and it is now floating on top of the <p> element.
In this example, we are making the <div> box float to the left side. Similarly, you can make it float to the right side like this:
1div {
2 float: left;
3 /* . . . */
4}You can also float multiple boxes together like this:
Open demo in new tabClearing float
Notice that when the <div> boxes are floating, all subsequent <p> elements will move up to fill their original space. If you want to change this default behavior, meaning you don't want the floated boxes to affect the layout of other elements, you can clear the side effects of float using the clear property.
The clear property takes four values, none (default), left, right, and both.
When set to left, the side effects of left floated boxes will be removed, as shown in the demonstration. As you can see, the two <div> boxes are still floating next to each other, but the <p> element is no longer affected.
When set to right, the side effects of right floated boxes will be removed, and when set to both, the side effects of all floated boxes will be removed.