Floating & Clearing

Historically, float let text wrap around images.

• float:left or float:right – element is taken out of normal flow and moves to either side.
• clear:left|right|both – forces an element to start below floated elements.

Modern layouts rarely need floats; Flexbox/Grid are preferred. However, floats are still needed for inline image wrap.

---

Example: Image with text wrap

<img src="portrait.jpg" alt="Portrait" style="float:left; margin:0 1rem 1rem 0;" width="150" />
<p>Long paragraph that wraps around the image...</p>