Float & Clear
The classic way to wrap text around an image — still common, though Flexbox now handles most layout.
What you will learn
- Float elements left or right
- Clear floats
- Know when float is still the right tool
Floating an image
float pushes an element to one side and lets text wrap around it — its main modern use.
<style>
img.f { float: left; margin: 0 14px 8px 0; border-radius: 8px; }
p { line-height: 1.6; }
</style>
<p>
<img class="f" src="https://picsum.photos/90" alt="thumb" width="90">
This text wraps neatly around the floated image on the left. Float is perfect for this
magazine-style text wrap. Keep adding text and it flows around the image edge naturally.
</p>float: left pushes the image to the left edge and — the key effect — lets the paragraph text flow around its right side, just like in a magazine or newspaper. The margin: 0 14px 8px 0 adds a little gap on the image’s right and bottom so the text does not touch it. Without float, the image would sit on its own line and the text would start below it.
Watch out: Floats can make a parent “collapse” (lose its height). The old fix is a clearfix or simply overflow: auto on the parent. For full page layouts, prefer Flexbox or Grid — they are far easier.
Note: Historically, whole websites were built with floats. Today floats are mostly used for text-wrap; Flexbox and Grid (next unit) are the modern layout tools.
Q. What is float MOST useful for today?
✍️ Practice
- Float an image left and wrap a paragraph around it.
- Float a small “quote” box to the right of an article.
🏠 Homework
- Create a magazine-style article with a floated image and wrapped text.