CSS Float Property
- Introduction to the CSS float property
- The syntax of the CSS float property
- Example of the CSS float property
Introduction to the CSS Float Property
In this tutorial, we will discuss float CSS property. Using this property, you can place an HTML element on the left or right side of its container on the webpage.
Float is a positioning property in CSS. When reading a newspaper, you may have seen that there is a text column and that column also contains an image related to the same text which floats in the left or right side.
Float is a positioning property in CSS. When reading a newspaper, you may have seen that there is a text column and that column also contains an image related to the same text which floats in the left or right side.
Many times in the textbook, it happens that there is a text around the image and that image is float in the left or right side.
From this, the reader knows that the given image is related to text and apart from this it also creates a beautiful layout which does not seem to be strange to the reader. If the image is shown separately, it also covers more space and the layout also gets worse.
This work is done by the text editor in the newspapers and books, but if you want to create such a layout on a web page, you can use the CSS float property.
By CSS float property, an element is a float in the left or right, from which the surrounding elements surround it. This creates column layouts that make the webpage even more beautiful.
Originally CSS float property was designed to create a simple layout in which an image is a float inside a text column(container). As you can see in newspapers or textbooks.
But the web developer felt the need to float another element just like images, and then it used to float another element apart from the property images.
Now, this CSS float property is one of the most commonly used properties of web developers. Through this property, you can organize by floating elements on the webpage.
Syntax of the CSS Float Property
The general syntax for CSS float property has been given below.
- float: left;
- float: right;
- float: none;
- float: initial;
- float: inherit;
As mentioned in the above syntax, CSS float property can have five possible values. These are described below.
- left - With this value, the element float in the left side.
- right - With this value, element float in the right side.
- none - With this value, the element is not floated and The sequence in which it was placed is shown in the same sequence.
- initial - With this value, the property is set from the default value.
- inherit - From this value, the property is inherited from the parent element.
Example of the CSS Float Property
CSS float property has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> CSS Float Example </title>
<style type="text/css">
body{
width: 30%;
}
img{
width: 40px;
}
#imageNone{
float: none;
}
#imageLeft{
float: left;
}
#imageRight{
float: right;
}
#imageInitial{
float: initial;
}
#imageInherit{
float: inherit;
}
</style>
</head>
<body>
<h2>CSS Float Example</h2>
<p><img id="imageNone" src="flower.jpg" alt="Flower"> There is "none" value of the float property in CSS which means no float. </p>
<p><img id="imageLeft" src="flower.jpg" alt="Flower"> There is "left" value of the float property in CSS which means flot in left side. </p>
<p><img id="imageRight" src="flower.jpg" alt="Flower"> There is "right" value of the float property in CSS which means float in right side. </p>
<p><img id="imageInitial" src="flower.jpg" alt="Flower"> There is "initial" value of the float property in CSS which means default float. </p>
<p><img id="imageInherit" src="flower.jpg" alt="Flower"> There is "inherit" value of the float property in CSS which means float inherit from parent element. </p>
<style type="text/css">
body{
width: 30%;
}
img{
width: 40px;
}
#imageNone{
float: none;
}
#imageLeft{
float: left;
}
#imageRight{
float: right;
}
#imageInitial{
float: initial;
}
#imageInherit{
float: inherit;
}
</style>
</head>
<body>
<h2>CSS Float Example</h2>
<p><img id="imageNone" src="flower.jpg" alt="Flower"> There is "none" value of the float property in CSS which means no float. </p>
<p><img id="imageLeft" src="flower.jpg" alt="Flower"> There is "left" value of the float property in CSS which means flot in left side. </p>
<p><img id="imageRight" src="flower.jpg" alt="Flower"> There is "right" value of the float property in CSS which means float in right side. </p>
<p><img id="imageInitial" src="flower.jpg" alt="Flower"> There is "initial" value of the float property in CSS which means default float. </p>
<p><img id="imageInherit" src="flower.jpg" alt="Flower"> There is "inherit" value of the float property in CSS which means float inherit from parent element. </p>
</body>
</html>
The above example will produce the below output.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.