Float, Clear and Flow Root

What Is It?

Float moves a box to an edge so following inline content wraps around it. Clear moves a following box below relevant floats.

Properties, Tags and Attributes Explained

• float: left or right floats an element; none disables floating.
• clear: left, right, or both prevents a box sitting beside matching earlier floats.
• display: flow-root: Creates a block formatting context that contains floats.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Wrap article text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float, Clear and Flow Root</title>
  <style>
    .article { display: flow-root; }
    .thumb { float: left; width: 70px; height: 70px; margin: 0 12px 8px 0; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="article"><div class="thumb" aria-hidden="true"></div><p>Text flows around this decorative thumbnail. Floats are useful for this article pattern. Add more sentences to see the lines continue beside and below the box.</p></div>
</body>
</html>

What you see: Text wraps beside the blue thumbnail. The parent contains the float.

Example 2: Clear the next section

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float, Clear and Flow Root</title>
  <style>
    .thumb { float: right; width: 80px; height: 60px; background: #fde68a; }
    h3 { clear: both; }
  </style>
</head>
<body>
  <div class="thumb" aria-hidden="true"></div><p>Intro beside a float.</p><h3>A new section below the float</h3>
</body>
</html>

What you see: The heading starts below the floated box.

When and Where to Use It

Use float for text wrapping around images. Use Flexbox or Grid for general component and page layout.

Common Mistake or Useful Tip

A floated child may extend outside a normal parent; flow-root is a direct way to contain it without clipping overflow.

Try It Yourself

Switch the first float to right and adjust its margin.