CSS Float: How to Wrap and Position Elements

💡 The Concept

The CSS float property is one of the original layout tools in CSS, still useful today for wrapping text around images. The float property pushes an element to the left or right side of its container so that surrounding text wraps around it. It was originally designed to replicate the print layout technique of wrapping text around images, and that is still its most common use today.

The float property takes three values:

• left: the element floats to the left and text wraps on its right
• right: the element floats to the right and text wraps on its left
• none: the default, no floating

Floating an Image

The most common use case is wrapping text around an image. Float the image and add a margin so the text does not press right up against it:

img {
   float: left;
}

When you float images, you usually need to adjust how they are placed on the page with some margin. A nice trick for floated images is to set the width of an image to a percentage so that the floated image works on mobile devices.

Clearing Floats

When you float an element, it is removed from the normal document flow. The parent container no longer accounts for its height, which can cause the next element to slide up alongside it unexpectedly. The clear property fixes this by forcing an element to start below any floated elements:

footer {
   clear: both;
}

When to Use Floats

Floats are less common for page layout. More common is to create a layout with stacking columns. If you continue to follow these lessons you will learn how to do it with Bootstrap. But for wrapping text around an image in an article or blog post, float is still the right tool.

🎬 Video Demonstration

This video demonstrates how the float property works.

Exercise: Try It Yourself

Step 1. Open JSFiddle.

Step 2. Add this HTML to the HTML panel. Notice that the image comes before the paragraph so the text wraps around it correctly.

<div>
  <img src="https://webdevstudents.com/wp-content/uploads/2025/09/corgi.png" width="200" height="200" alt="A corgi in a field with yellow flowers">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

What is placeholder text? When web designers are working on a layout but don’t have the final copy yet, they place “lorem ipsum” text where the real content will go.

Step 3. Add this CSS to the CSS panel:

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

Step 4. Run the fiddle. The text should wrap around the corgi on its left side.

Step 5. Change float: right to float: left and run it again. Notice that the margin now needs to move to the right side so the text doesn’t press against the image.

Run your fiddle and check your result against this screenshot:

❓ Frequently Asked Questions

★ Key Takeaways

Float is a CSS property used to wrap text around images and position elements side by side. This lesson showed you how float works and how to use the clear property when you are done with it. Next, you will learn about advanced CSS selectors, which give you more precise ways to target specific elements. These are a big step up in your styling power.

← Back to Page Layout Lessons

← Back to All Lessons