The float property in CSS determines on which side(i.e. Left or Right) an element should float.
The float property in CSS places an element on either left or right side of the web page helping the texts to adjust around it.
The overflow property can have five values:
<html>
<head>
<style>
img {
float: left;
width:150px;
height:190px;
}
</style>
</head>
<body>
<p>
<img src="learnerslesson_logo.png">
In a huge pond, there lived many fish. They were arrogant and never listened to anyone. In this pond, there also lived a kind-hearted crocodile. He advised the fish, not to be arrogant and overconfident. But the fish never listened to him. One afternoon, the crocodile was resting when two fishermen stopped there to drink water.
</p>
</body>
</html>
So, if you see the above example, we have an image(i.e. learnerslesson_logo.png) and a text inside the <p> element.
<p> <img src="learnerslesson_logo.png"> In a huge pond, there lived many fish. They were arrogant and never listened to anyone. In this pond, there also lived a kind-hearted crocodile. He advised the fish, not to be arrogant and overconfident. But the fish never listened to him. One afternoon, the crocodile was resting when two fishermen stopped there to drink water. </p>
And we want the image and text to be placed side by side. The image to the right and the text to the left.
In such scenario, have use the float property with the <img> element.
img {
float: left;
width:150px;
height:190px;
}And set he value of float property to left.
With this the image floats to the left and the text adjusts itself by the side of the image.
<html>
<head>
<style>
img {
float: right;
width:150px;
height:190px;
}
</style>
</head>
<body>
<p>
<img src="learnerslesson_logo.png">
In a huge pond, there lived many fish. They were arrogant and never listened to anyone. In this pond, there also lived a kind-hearted crocodile. He advised the fish, not to be arrogant and overconfident. But the fish never listened to him. One afternoon, the crocodile was resting when two fishermen stopped there to drink water.
</p>
</body>
</html>
So, if you see the above example, we have an image(i.e. learnerslesson_logo.png) and a text inside the <p> element.
And we want the image and text to be placed side by side. The image to the left and the text to the right.
In such scenario, have use the float property with the <img> element.
img {
float: right;
width:150px;
height:190px;
}And set he value of float property to right.
With this the image floats to the right and the text adjusts itself by the left side of the image.
<html>
<head>
<style>
img {
float: none;
width:150px;
height:190px;
}
</style>
</head>
<body>
<p>
<img src="learnerslesson_logo.png">
In a huge pond, there lived many fish. They were arrogant and never listened to anyone. In this pond, there also lived a kind-hearted crocodile. He advised the fish, not to be arrogant and overconfident. But the fish never listened to him. One afternoon, the crocodile was resting when two fishermen stopped there to drink water.
</p>
</body>
</html>
When we have set the value of float property to none, the text is placed just below the image.