CSS float Property

February 10, 2021 12:37 pm IST

You are Here:

CSS float Property

CSS float property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

Note: Absolutely positioned elements ignores the float property.

Note: The floating element will be removed from the normal flow of the page, though still remaining a part of the flow.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 125px; height: 100px; float: left; } </style> </head> <body> <h1>CSS float Property</h1> <img src="car-left.png"> <p> This is a paragraph.</p> </body> </html>

Run

Syntax

Using CSS

element{ float: right; }

Using Javascript

object.style.float="right";

Animatable

No, float property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS float property is none.

Property Value

The following table provides a list of values for CSS float property.

Value	Explanation
none	Specifies the element must not float.
left	Specifies the element must float on the left side of its containing block.
right	Specifies the element must float on the right side of its containing block.

Demonstrating Float Right

In the following example, we will demonstrate how CSS float:right property behaves.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 125px; height: 100px; float: right; } </style> </head> <body> <h1>CSS float Property</h1> <img src="car-left.png"> <p> This is a paragraph.</p> </body> </html>

Run

Demonstrating Float None

In the following example, we will demonstrate how CSS float:none property behaves.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 125px; height: 100px; float: none; } </style> </head> <body> <h1>CSS float Property</h1> <img src="car-left.png"> <p> This is a paragraph.</p> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS float property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> img{ width: 125px; height: 100px; } </style> </head> <body> <h1>CSS float Property</h1> <img src="car-left.png"> <p> This is a paragraph.</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("img")[0]; function myFunction(){ x.style.float = "right"; } </script> </body> </html>

Run