On text in the patient, let us talk about the float property of CSS. Basically, all the HTML elements will be rendered next to each other. What if there is a scenario wherein I want to have an image next to the paragraph, but a paragraph is a block element it is take the whole width of the container, I want my image to be floated next to the paragraph in that scenario, I can go in for the float property. When you say float, the elements will be floated next to each other, it can either float right or it can float left. Have a look on this I have given the float property float right or float left. Once you have floated an element means the elements next to that also will continue the same sequence.

They also will be floated. If you want to clear it and make the next elements to proper the default sequence means Going for clear both. Now, let us try an example of how to use this float property in an HTML page with two paragraphs and an image. Now, let us understand about the float property. Before that let me explain how this will be rendered in the browser. First I wrote a paragraph a paragraph with a block element.

So, it will take the whole width of the container Next I have got an image with height and width. So, next the image will be rendered, then I have got a paragraph paragraph again it is going to take the whole width of the container in case of the image I have given the proper width and height so it will be rendered accordingly. Now for let us see the output first. Now I have got the output. Now my requirement is I want the image next to the paragraph. I will explain this she want to have the paragraph next I want to have the image then then next Paragraph This is how I want but the paragraph is taking the whole page.

So, what I need to specify I need to go in of course, I can give the height and width property, but I want the image floated next to the paragraph. So, I have to go in for the float property, let me go on add the float property. So, inside size for this image, I need to specify float right. Let me save this. Now I will refresh the browser refresh. You can see the output now what has happened first the paragraph is rendered then immediate to that the image is rendered because you are floating into the right What about the past the second paragraph, the second paragraph is actually coming next to this image.

That is why it is pushed up. So if you want to keep it as such, you can leave it What if you want to have this the second paragraph We may make, you have to clear the float property. So how to clear it, I can just go to the program, I can use a clear property. Let me show you. Which I want to clear I want to clear this paragraph, it has to have go to its own default position only. So what I can do it and go here, I've got an ID, so I can do hash pop.

Calibrate, then I'll specify clear. Right. Now let me refresh this. You can see don't know what happened, clear the right path and go back here default position, that is what we have specified. So if you want to embed an image together with a paragraph, you can go in for this load property. You can float the image either to the left or to the right.

And rest of the content. If you want to float you leave it passage or clear it using clear property. This is our