CSS float property
In the CSS tutorial, today we will learn how to apply CSS float property with syntax and examples.
In CSS float property, you can change the position or formate of the element on the left or right side in a container.
CSS Float Property Syntax
Let’s see the CSS float property syntax, which is given below:
There are given below float property values:
- left – If you define left value the HTML element change position (float) to the left of its container
- right – If you define right value the HTML element change position (float) to the right of its container.
- none –If you define none value the HTML element does not float. This will no move(it’s the default).
- inherit – If you define inherit value the HTML element inherits the float value of its parent.
Example- float: right;
The given example define that an image should float to the right in a text:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
</html>
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Example- float: left;
The given example define that an image should float to the left in a text:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
</html>
Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.