The float property can be loosely described as an alternative to the position property.
The permissible values for this property are:
- left
- right
- none
- inherit
In the simplest usage, this property can be useful when you want to wrap any text around images.
For example, if you need some image and text to be present on your web-page and you specifically want the images to be on the right.
Therefore, you can set the float property for the <img> tag to be right. Hence, all the images on the webpage will be positioned on the right of the text content. Similarly, you can float the image to left.
In case you choose to not specify any float value or set the float property to be none for the image in the above example, the text will not be very neatly wrapped around the image. You might see undesired spaces and alignment of the text content around the image depending upon the size and box of the image.
clear Property
Often, there are cases when the floating element starts overlapping with the other elements on the web-page. In such cases, we need to clear all the floating elements on a particular side to make our element visible.
The clear property is used for this purpose. Let’s say, you have set float as left for a <div> but you want to add another <div> and avoid any overlaps. So, you can set the clear property left for the second <div>.
Now, when rendered, the second <div> will get all the left floating elements cleared and adjusted in the “un-cleared” space. In simpler terms, no element is allowed to float on the left of the second <div> element because of the clear property.
The clear property can be used best when you have already specified the float property for other elements.