Wrapping Text Using Float and Clear

Hi everyone!

Now that we have explored the display property in CSS, it is time to dive into another foundational concept that has shaped web design for years — the float property. Even though newer layout methods like Flexbox and Grid are now widely preferred, learning how float works still adds a lot of value. It equips us to handle older projects, debug legacy code, or create simple layout tricks quickly.

What Float Does in CSS

The float property allows an element to shift to the left or right inside its container. This movement causes surrounding content — like text or other elements — to wrap around the floated item. Float was inspired by print-style layouts and has been a common technique for aligning images next to paragraphs or creating sidebar layouts.

Despite being somewhat outdated for modern complex layouts, float still has its use cases. Understanding how it works will prepare us for a wider range of situations in web development.

Floating Images Beside Text

Let us walk through a simple example. Suppose we have this HTML:

<img src="cat.jpg" alt="Cute Cat">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod lorem at diam facilisis tincidunt...</p>

And here is the CSS to make it float:

img {
  float: left;
  margin-right: 10px;
}

The result is that the image moves to the left, and the paragraph wraps around it to the right. To float it on the other side, we could use float: right instead.

This method creates a tight visual connection between images and their corresponding text, making it especially useful for articles, profiles, or content-heavy pages.

Using Clear to Fix Layout Flow

Floated elements can sometimes cause problems in layout flow. If the next content block does not account for the float, it might appear beside the floated element instead of below it. For example:

<img src="cat.jpg" alt="Cute Cat">
<p>This is the main paragraph...</p>
<footer>Copyright 2025</footer>

Without any adjustment, the footer may float next to the image. To prevent this, we use the clear property:

footer {
  clear: both;
}

This ensures that the footer drops below the floated elements and restores the expected layout flow. Using clear: both is a simple but powerful way to maintain structure.

Building Columns with Float

We can also create simple side-by-side layouts using float. Take this example:

<div class="cat-block">Cat content goes here</div>
<div class="dog-block">Dog content goes here</div>
<footer>Footer content</footer>

And here is the CSS:

.cat-block {
  float: left;
  width: 45%;
}

.dog-block {
  float: right;
  width: 45%;
}

footer {
  clear: both;
}

This gives us two columns for Cat and Dog content placed side by side. The footer stays underneath both, spanning the entire width.

Illustration suggestion: Display two rectangular blocks labeled Cat and Dog horizontally aligned with some text or images inside. A full-width footer appears below them.

Hands-On Practice with Float and Clear

If we are working on the 8.1 CSS Float project files, here are some steps we can try to solidify what we have learned:

1. Float the images within each content block so that text wraps around them.

2. Apply float: left to the Cat block and float: right to the Dog block.

3. Use clear: both on the footer to ensure proper layout structure.

Doing these exercises will give us practical insight into how float and clear work together in real web layouts.

When to Use Float in Modern CSS

While Flexbox and Grid are now the default choices for layout, float can still be the right tool in some situations:

• Wrapping text around images in blogs or editorial layouts

• Making lightweight layout tweaks without full redesigns

• Working on older websites that were built before modern layout systems

Knowing when and how to use float will help us work efficiently across a broader range of projects.

Final Thoughts

Float has played a major role in the evolution of CSS layout techniques. While we may not rely on it as heavily today, having a good grasp of float and clear gives us a well-rounded understanding of how web design has progressed. It also equips us to handle legacy code or quick layout fixes confidently.

Next, we will dive into Flexbox — a more flexible and powerful system for building modern, responsive designs. Until then, keep practicing and enjoy the process of mastering CSS!

Baca juga