CSS Float Property
The float property helps us put some elements on the left or right side of the container. You can float something to the right or to left, if we want to float an image towards the right side of a container, we can do that simply by using this CSS property. All you have to do is type –
float:right;
As a result, the element is now removed from the natural flow, but still is going to be part of the flow. When we will take an example for the same, you can get an idea. Here are some values for the property float.
- float: left; – this property specifies the content to float towards the left of the container.
- float: right; – this property specifies the content to float towards the right of the container.
- float:none; – default(no float)
You can refer to the below example where we try to float an image to the left of a paragraph. You can try floating the same image to the right.
So, here, we have made a div, with some random text in it, and floated the image to the left of the text. The output now looks something like this –
Well, you try to first observe what happens when you open the file normally in the browser, which means just don’t make the image float towards the left. If you do so, you will find out that the immediate space after the image is completely empty, and the text is starting from the next line. But if we make the image float to the left, the image moves to the left of the container, and the rest you can see in the output as well.
You can try for the right value for the float property as well. As the name says now, it is going to float the image to the right side of the container. If you do none, means that the element should not float. You can give it a try for some other values, and we can use them as per our requirements.
