CSS float Property


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
Applies to
All except for positioned elements and generated content
Computed value
As specified
JavaScript syntax

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.


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


  • 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.


<div class="pull-left"> 
<img src="images/2.png" alt="">
<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>
.pull-left { 
   float: left; 
   padding-right: 10px; 

Browser Support

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

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st January 2024