CSS Float Property

In this chapter you will learn:
What is float property?
Values of float property
Examples of float property

Float property is a positioning property because it is used to position an element as left or right but if any element is absolutely positioned then it can’t support this property.

Values of float property
Left:- This property is used to positioning the element to the left of the web page.
Right:- This property is used for positioning the element to the right of the web page.
Examples of this property:-
Example 1. float:left;
<html>
<head>
<style type="text/css">
img
{
float:left;
}
</style>
</head>
<body>
<img src="css-icon.jpg" alt="image of css icon"/>
<p> This is the example of float:left </p>
</body>
</html>

Guide:-
Since the value of float property is left so the image will display in the left of the web page.
Output:- example of float:left
Example 2. float:right;
<html>
<head>
<style type="text/css">
img,p
{
float:right;
}
</style>
</head>
<body>
<img src="css-icon.jpg" alt="image of css icon"/>
<p> This is the example of float:right </p>
</body>
</html>

Guide:-
Since the value of float, the property is right so the image will display in the right of the web page
Output:- example of float:right

Summary

In this chapter, you have learned about float property and its uses with examples so now try it yourself and click on Next button to continue-

More Articles

 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.