float

Definition

The float property in CSS is used to specify how an element should float on the page. Floating an element means moving it to the left or right of its containing element, and allowing other elements to flow around it. This is commonly used to create layouts where content is positioned in columns, or where images are positioned to one side of a block of text.

Examples

Float an image to the left of some text:

<div>
  <img src="example.jpg" style="float: left; margin-right: 10px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis euismod turpis eu auctor. Nulla facilisi. Mauris ultrices auctor est, non faucibus justo aliquet in.</p>
</div>

Float a navigation menu to the right of a header:

<header>
  <h1>My Website</h1>
  <nav style="float: right;">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Create a two-column layout:

<div>
  <div style="float: left; width: 50%;">
    <h2>Column 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div style="float: right; width: 50%;">
    <h2>Column 2</h2>
    <p>Quisque placerat nunc nec libero dignissim, at volutpat leo bibendum.</p>
  </div>
</div>

Values

Best Practices

• Always clear floats after the floated element, to prevent layout issues. This can be done using the clear property.
• Avoid floating elements with fixed heights, as this can cause problems with responsive layouts.
• When creating a layout with floated elements, consider using a container element with overflow: hidden to contain the floats.
• Try to avoid using the float property for layout, as it can be difficult to maintain and may cause issues with responsive design. Consider using newer layout methods such as Flexbox or Grid.
• When using floats, be aware that elements with a lower z-index value may be obscured by elements with a higher z-index value, even if they appear to be in front of the higher z-index element.

Browser Compatibility