CSS Tutorial

The language for styling web pages.

CSS Float

The CSS float property specifies how an element should float. It is used for wrapping text around images or creating multi-column layouts (though Flexbox/Grid are now preferred).

Float Values:

left - Float to the left
right - Float to the right
none - No float (default)
inherit - Inherits from parent

Clearfix: Use overflow: auto or ::after hack on the parent to contain floated children.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family:Arial; padding:20px; }
  .float-left  { float:left;  margin:0 15px 10px 0; }
  .float-right { float:right; margin:0 0 10px 15px; }
  img { border-radius:8px; }
  .clearfix::after { content:""; display:table; clear:both; }
  .col { float:left; width:30%; margin:1.5%; background:#1572B6; color:white; padding:15px; border-radius:8px; box-sizing:border-box; }
  .clear { clear:both; }
</style>
</head>
<body>
  <div class="clearfix">
    <img src="https://via.placeholder.com/120x80/1572B6/fff?text=Image" class="float-left" alt="float left">
    <p>This text wraps around the <strong>left-floated</strong> image. Float is an older layout technique, but still useful for wrapping text around images in articles and blog posts.</p>
  </div>
  <hr>
  <div class="clearfix">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
  <div class="clear"></div>
  <p>Three columns using float.</p>
</body>
</html>

Result

Topics

CSS Introduction CSS Syntax CSS Selectors CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Box Model CSS Text CSS Fonts CSS Display CSS Position CSS Flexbox CSS Grid CSS Transitions CSS Animations CSS Media Queries CSS Variables CSS Gradients CSS Shadows CSS 2D Transforms CSS 3D Transforms CSS Pseudo-classes CSS Pseudo-elements CSS Float CSS Overflow CSS Z-index CSS Opacity CSS Buttons

CSS Tutorial

Course Topics

CSS Float

CSS Float

Float Values:

Try It Yourself

Topics