Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use floating image in HTML page?
To use a floating image in HTML, use the CSS float property. It allows you to position an image to the left or right side of its container, causing surrounding text to wrap around the image naturally.
Syntax
Following is the syntax for the CSS float property −
img {
float: value;
}
Alternatively, you can apply it inline −
<img src="image.jpg" style="float: left;">
Float Property Values
The float property accepts the following values −
| Property Value | Description |
|---|---|
| none | Default value. The element is not floated and appears in its normal position. |
| left | The image floats to the left side of its container, with text wrapping around the right side. |
| right | The image floats to the right side of its container, with text wrapping around the left side. |
| initial | Sets the property to its default value (same as none). |
| inherit | Inherits the float value from its parent element. |
Float Left Example
Following example demonstrates how to float an image to the left −
<!DOCTYPE html>
<html>
<head>
<title>Float Left Image</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>Float Left Example</h2>
<p>
<img src="https://www.tutorialspoint.com/green/images/logo.png"
style="float: left; margin-right: 15px;"
width="120" height="53" alt="TutorialsPoint Logo" />
This is demo text that wraps around the left-floated image.
The image appears on the left side of the container, and the
text flows naturally around it on the right side. This creates
a professional layout commonly used in articles and web pages.
You can see how the text continues to wrap around the image
until it reaches the bottom of the image.
</p>
</body>
</html>
The output shows the image positioned to the left with text wrapping around it on the right side −
Float Left Example
[Logo] This is demo text that wraps around the left-floated image. The image
appears on the left side of the container, and the text flows naturally
around it on the right side. This creates a professional layout commonly
used in articles and web pages.
Float Right Example
Following example demonstrates how to float an image to the right −
<!DOCTYPE html>
<html>
<head>
<title>Float Right Image</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>Float Right Example</h2>
<p>
<img src="https://www.tutorialspoint.com/green/images/logo.png"
style="float: right; margin-left: 15px;"
width="120" height="53" alt="TutorialsPoint Logo" />
This is demo text that wraps around the right-floated image.
The image appears on the right side of the container, and the
text flows naturally around it on the left side. Float right
is commonly used for sidebar content, author photos, or
decorative elements that should appear alongside the main text.
</p>
</body>
</html>
The output shows the image positioned to the right with text wrapping around it on the left side −
Float Right Example This is demo text that wraps around the right-floated image. The image [Logo] appears on the right side of the container, and the text flows naturally around it on the left side. Float right is commonly used for sidebar content.
Using CSS Classes for Float
Instead of inline styles, it's better practice to use CSS classes for floating images −
<!DOCTYPE html>
<html>
<head>
<title>Float with CSS Classes</title>
<style>
.float-left {
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
.float-right {
float: right;
margin-left: 15px;
margin-bottom: 10px;
}
.clearfix {
clear: both;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>CSS Classes for Floating</h2>
<p>
<img src="https://www.tutorialspoint.com/green/images/logo.png"
class="float-left" width="100" height="44" alt="Logo" />
This paragraph uses a CSS class to float the image left. Using classes
makes it easier to maintain consistent styling across multiple images.
</p>
<div class="clearfix"></div>
<p>
<img src="https://www.tutorialspoint.com/green/images/logo.png"
class="float-right" width="100" height="44" alt="Logo" />
This paragraph uses a CSS class to float the image right. The clearfix
div above ensures proper spacing between sections.
</p>
</body>
</html>
This approach provides better maintainability and consistent spacing through margin properties.
Clearing Floats
Sometimes you need to stop text from wrapping around floated images. Use the clear property −
<!DOCTYPE html>
<html>
<head>
<title>Clearing Floats</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>Before Clear</h2>
<p>
<img src="https://www.tutorialspoint.com/green/images/logo.png"
style="float: left; margin-right: 15px;"
width="100" height="44" alt="Logo" />
This text wraps around the floated image.
</p>
<h2 style="clear: left;">After Clear</h2>
<p>This heading uses clear: left, so it appears below the floated image instead of wrapping around it.</p>
</body>
</html>
The clear: left property forces the heading to appear below the floated image rather than beside it.
Key Points
-
Use
marginproperties to add spacing around floated images for better readability. -
Always include the
altattribute for accessibility. -
Use
clear: bothto ensure elements appear below all floated content. -
Modern CSS alternatives like Flexbox and CSS Grid often provide better layout control than floats.
-
Floated elements are removed from the normal document flow, which can affect surrounding element positioning.
Conclusion
The CSS float property allows images to be positioned left or right within their container, with text wrapping naturally around them. While float was traditionally used for layouts, it remains useful for positioning images within text content. Use appropriate margin spacing and clear properties to control the layout effectively.
22K+ Views
