Float and Clear: Classic Layout Techniques

If you’ve ever tried to place an image beside some text or create simple columns and felt stuck, you’re not alone. Before modern tools like Flexbox and Grid, web pages were often laid out using float and clear. These classic techniques are still worth learning because you’ll see them in older code, tutorials, and many existing websites.

In this article, you’ll learn what float and clear are, how they work together, and how to use them to create simple layouts. You’ll follow step-by-step examples and write small, real-world snippets you can test right in your browser.

What are float and clear?

Float is a CSS property that lets an element move to the left or right and allows other content (like text) to wrap around it.

Clear is a CSS property that tells an element not to sit next to floated elements on a certain side. Instead, it will move down below them.

Think of it like this:

float = “move me to the side and let others wrap around.”
clear = “don’t let me sit next to that floated stuff; put me underneath instead.”

You’ll use them together to control how content flows on the page.

Example 1: Wrapping text around an image

Let’s start with a common pattern: an image floated to the left, with text wrapping around it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Float Example 1</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <img src="https://via.placeholder.com/150" alt="Placeholder" class="float-left" />

  <p>
    This is some sample text that will wrap around the floated image. As you
    add more text, you’ll see it flowing neatly beside the picture.
  </p>
</body>
</html>

CSS (styles.css)

.float-left {
  float: left;          /* Move image to the left side */
  margin: 0 15px 10px;  /* Add space around the image: top, right, bottom */
}

What’s happening?

float: left; pushes the image to the left side.
The paragraph text flows to the right of the image and then below it.
The margin gives the text some breathing room so it’s not stuck to the image.

Try it yourself:

Change float: left; to float: right; and refresh the page. The image will move to the right, and the text will wrap on the left.
Increase the image size (for example, https://via.placeholder.com/250) to see how it affects the flow of text.

You’ve just used your first float layout. That’s a great start.

Example 2: Side-by-side boxes using float

Now let’s build something more layout-like: two boxes sitting next to each other, like simple columns.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Float Example 2</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    <div class="box left-box">Left box content</div>
    <div class="box right-box">Right box content</div>
  </div>

  <p>This paragraph comes after the boxes.</p>
</body>
</html>

CSS (styles.css)

.container {
  border: 2px solid #ccc;   /* Just to show the container */
  padding: 10px;
}

.box {
  width: 45%;               /* Each box takes up part of the width */
  padding: 10px;
  background: #f0f0f0;
  margin-bottom: 10px;
}

.left-box {
  float: left;              /* Move this box to the left */
}

.right-box {
  float: right;             /* Move this box to the right */
}

What’s happening?

Both .left-box and .right-box are floated, so they sit side by side.
The container has a border, but you might notice something odd: it may collapse and not fully wrap around the boxes.

This shows one of the main “gotchas” of using floats: floated elements are taken out of the normal document flow, so their parent container may not stretch to contain them.

We’ll fix that next with clear.

Try it yourself:

Remove float: right; from .right-box and refresh. The boxes will stack instead of sitting side by side.
Change the widths (for example, width: 48%;) and see how it affects the layout.

Example 3: Using clear to fix float issues

When you float elements inside a container, the container doesn’t automatically “see” their height. This can cause layouts to look broken. One common fix is to use a clearing element.

We’ll add a simple div that clears the floats.

Updated HTML

<div class="container">
  <div class="box left-box">Left box content</div>
  <div class="box right-box">Right box content</div>
  <div class="clearfix"></div> <!-- Clearing element -->
</div>

<p>This paragraph comes after the boxes.</p>

Updated CSS

.clearfix {
  clear: both;   /* Move below any left or right floats above */
}

What’s happening?

clear: both; tells the .clearfix element: “Do not sit beside any floating elements on either side; move down below them.”
Once the clearing element is placed, the container now stretches to include the floated boxes, because the clearing element is not floated.

You’ve now used the clear property to control flow and fix a common layout problem.

Try it yourself:

Remove the <div class="clearfix"></div> and see how the container’s border behaves.
Change clear: both; to clear: left; and then try floating only the left box to see the difference.

Example 4: A simple two-column layout with float and clear

Let’s put everything together and build a simple page layout: a header, two columns, and a footer.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Float Layout Example</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="header">My Website Header</header>

  <div class="main">
    <aside class="sidebar">Sidebar content</aside>
    <section class="content">Main article content goes here.</section>
    <div class="clearfix"></div>
  </div>

  <footer class="footer">Footer information</footer>
</body>
</html>

CSS (styles.css)

body {
  font-family: Arial, sans-serif;
}

.header,
.footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 15px;
}

.main {
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 10px;
}

.sidebar {
  float: left;          /* Sidebar on the left */
  width: 30%;
  background: #f7f7f7;
  padding: 10px;
}

.content {
  float: right;         /* Main content on the right */
  width: 65%;
  background: #fff;
  padding: 10px;
}

.clearfix {
  clear: both;          /* Clear both floats so .main wraps them */
}

What you should see

A dark header at the top.
A main area with a sidebar on the left and main content on the right.
A footer below everything.

The sidebar and content sections are floated, and the .clearfix ensures the .main container wraps around both columns.

Try it yourself:

Swap the floats: make .sidebar float right and .content float left.
Change the widths to 40% and 55% (make sure they don’t go over 100% together) and see how the layout changes.

Common float and clear tips

Here are some practical tips as you experiment:

Use percentages for columns. This helps layouts adapt to different screen sizes.
Remember margins. Add margin so text and boxes don’t feel cramped.
Always clear your floats. Use a clearing element (like .clearfix) after floated content so containers don’t collapse.
Don’t float everything. Floats are for specific layout pieces (like sidebars or images), not for every element on the page.

If things look broken, it often means:

An element is floating when it shouldn’t, or
You forgot to clear the floats.

What’s next?

You’ve learned how to:

Use float to move elements to the left or right and let text wrap around them.
Use clear to control how elements position themselves relative to floats.
Build simple layouts like wrapped images, side-by-side boxes, and a two-column page.

These classic techniques are still useful, especially when reading older code or working with legacy projects. Your next steps could be:

Recreate a simple blog layout using floats and clears.
Then explore Flexbox and CSS Grid, which make modern layouts easier and more flexible.

Learning layout takes practice, so celebrate each small layout you build. Keep experimenting, tweak the code examples, and don’t worry if you break things—every “broken” layout is a step toward understanding how the web really works.

Mudzinga