Being a positioning property, the CSS float property is used to push an element to the left or right. It allows the other elements to wrap around it. The CSS float property is used with images and layouts.
CSS Float working:
Elements can be floated only left or right i.e., horizontally and not vertically.
- A floated element may be moved to the extreme left or extreme right.
- The elements that are placed after the floating element will flow around the floating element.
- The elements that are placed before the floating element are not affected.
- The texts flow around the image to the left when the image floats to the right.
- The texts flow around the image to the right when the image floats to the left.
CSS Float Properties:
| Property | Uses | Values |
| clear | Used to stay away from the elements after the floating elements that flow around it. | left, right, both, none, inherit |
| float | Used to determine whether the box should float or not. | left, right, none, inherit |
CSS Float Property Values:
| Value | Uses |
| none | To indicate that an element will be displayed just where it occurred in the text and is not floated. |
| left | To float an element to the left. |
| right | To float an element to the right. |
| initial | To set the property to its initial value. |
| inherit | To inherit a property from its parent element. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h3>Example:</h3>
<p><img src="img.jpg" alt="Image" style="width:180px;height:180px;margin-left:5px;">
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </p>
</body>
</html>
Explanation:
In the above example, we are using the CSS Float to indicate that an image should float to the right in a text.