How to use floating image in HTML page?

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

Updated on: 22-Dec-2021

15K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements