The floating property in CSS defines whether our element should float to the left or right. The float property we can use in CSS to give a position of elements.
The floating property used with images can be applied to almost any element. The float property is used for positioning and layout on the web page. main common use is floating an image to one side and letting text wrap around it.
Here are the main key points about the float property. We will also learn how to set float in CSS.
How do you set float in CSS:
To use float in CSS you need a selector which is a CSS selector and you have to define the float property inside the brackets. for example,
{float: left;}, {float: right;}
CSS Syntax for float:
float: none|left|right|initial|inherit;
- none: This element does not float and has the default value.
- left: The elements float to the left side of the container.
- right: The elements float to the right side of its container.
- initial: This element is set to its default value.
- inherit: In this floating property element inherits from its parent element.
Now we will use the property values and understand how to use float property in CSS through the example
float left property with an example:
float: left;
The float: left; property in CSS is used to float the elements to the left side of its container. This will align the element to the left side of its containing element.
you can also clear the float using clear property if it’s needed or it’s necessary. now we will see the example of float: left through the code within an inline style the image to the left side of its container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="img"
style="width: 30%;
height: 50%;
float: left;
background-color: green;">
<img src="https://www.pngall.com/wp-content/uploads/5/Cartoon-Mr.
-Bean-PNG-Clipart.png" width="80%">
</div>
</body>
</html>
float: right;
The float: right; property in CSS is used to float the elements to the right side of its container. This will align the element to the right side of its containing element.
now we will see the example of float: right through the code within an inline style the image to the right side of its container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="img"
style="width: 30%;
height: 50%;
float: right;
background-color: red;">
<img src="https://www.pngall.com/wp-content/uploads/5/Cartoon-Mr.-Bean-PNG-Image.png"
width="80%">
</div>
</body>
</html>