CSS Float

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.