To use a floating image in HTML, use the CSS property float. It allows you to float an image left or right. More property values include the following:
| Sr.No. | Property Value & Description |
|---|---|
| 1 | none Not floated |
| 2 | left Floats to the left |
| 3 | right Floats to the right |
| 4 | initial Default value |
Example
You can try to run the following code to use floating image in HTML. Here’s the usage of float right and float left CSS attribute
<!DOCTYPE html> <html> <head> <title>HTML Floating Image</title> </head> <body> <h1>Float Right</h1> <p>The below image floats to the right.</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:right" width="190" height="84" /> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> <h1>Float Left</h1> <p>The below image floats to the left.</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:left" width="190" height="84" /> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
Output
