How To Use Floating Image In HTML Page? - Tutorialspoint

Trang chủ » Html Float Left » How To Use Floating Image In HTML Page? - Tutorialspoint

Có thể bạn quan tâm

  • Home
  • Whiteboard
  • Online Compilers
  • Practice
  • Articles
  • AI Assistant
  • Jobs
  • Tools
  • Corporate Training
  • Courses
  • Certifications
Menu Categories Login
  • Switch theme
  • SQL
  • HTML
  • CSS
  • Javascript
  • Python
  • Java
  • C
  • C++
  • PHP
  • Scala
  • C#
  • Tailwind CSS
  • Node.js
  • MySQL
  • MongoDB
  • PL/SQL
  • Swift
  • Bootstrap
  • R
  • Machine Learning
  • Blockchain
  • Angular
  • React Native
  • Computer Fundamentals
  • Compiler Design
  • Operating System
  • Data Structure and Algorithms
  • Computer Network
  • DBMS
  • Excel
Technical Questions and Answers
  • Data Structure Data Structure
  • Networking Networking
  • RDBMS RDBMS
  • Operating System Operating System
  • Java Java
  • MS Excel MS Excel
  • iOS iOS
  • HTML HTML
  • CSS CSS
  • Android Android
  • Python Python
  • C Programming C Programming
  • C++ C++
  • C# C#
  • MongoDB MongoDB
  • MySQL MySQL
  • Javascript Javascript
  • PHP PHP
  • Selected Reading
  • UPSC IAS Exams Notes
  • Developer's Best Practices
  • Questions and Answers
  • Effective Resume Writing
  • HR Interview Questions
  • Computer Glossary
  • Who is Who
How to use floating image in HTML page? HTMLWeb DevelopmentFront End Technology

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 noneNot floated
2 leftFloats to the left
3 rightFloats to the right
4 initialDefault 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

Alankritha Ammu Alankritha Ammu Updated on: 2021-12-22T10:35:43+05:30

22K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started Print Page Previous Next Advertisements

Từ khóa » Html Float Left