CSS float Property

Description

The float CSS property is used to define the horizontal alignment of an element within its containing element. When an element is set to "float," it is taken out of the normal document flow and positioned to the left or right of its parent container, allowing other content to flow around it. This property is often used in creating responsive layouts, where elements can be floated to create multi-column designs or to position images and text alongside each other. It's worth noting that floating elements can sometimes lead to layout challenges, especially when used excessively, so it's important to use them judiciously and consider alternative layout techniques like Flexbox or Grid in modern CSS for more complex layouts.

Initial value: none
Applies to: All except for positioned elements and generated content
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.cssFloat

Interactive Demo

Float me

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

float: [ left | right | top | bottom | start | end | none | <page-floats> ] && contour?

Values

leftThe left value indicates that the element must float to the far left side of its containing block.
rightThe right value indicates that the element must float to the far right side of its containing block.
topSame as 'left'
bottomsame as 'right'
startIf the 'direction' property is 'ltr', the same as 'left'; otherwise the same as 'right'.
endIf the 'direction' property is 'rtl', the same as 'right'; otherwise the same as 'left'.
noneIndicates that the element does not contain any float at all. This is the initial value of the float property.

Example

HTML

<div class="pull-left"> 

   <img src="images/2.png" alt=""> 

</div> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

CSS

.pull-left { 
   float: left; 
   padding-right: 10px; 
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS float property.

Desktop

12	1	1	7	1

Tablets / Mobile

18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 1st January 2024

Support Us