Floating Elements

Floating Elements

The float property was originally designed for wrapping text around images — like a newspaper layout. It removes an element from normal flow and pushes it to the left or right, letting content wrap around it.

Basic Float Syntax

img {
    float: left;    /* Element floats to the left, text wraps around the right */
}

img {
    float: right;   /* Element floats to the right, text wraps around the left */
}

img {
    float: none;    /* Default — no floating */
}

Text Wrapping Example

<div class="article">
    <img src="photo.jpg" class="float-left" alt="Photo">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    The text wraps around the floated image naturally, 
    just like in a newspaper or magazine layout.</p>
</div>

.float-left {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    width: 200px;
    border-radius: 8px;
}

┌────────┐ Lorem ipsum dolor sit amet,
│  IMG   │ consectetur adipiscing elit.
│ floated│ Sed do eiusmod tempor incididunt
│  left  │ ut labore et dolore magna aliqua.
└────────┘ Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.

What Happens When You Float

1. The element is removed from normal flow
2. It shifts to the left or right edge of its container
3. Other inline content (text, inline elements) wraps around it
4. Other block elements ignore it and flow behind it
5. The floated element behaves like an inline-block (accepts width/height)

Float Values

Value	Behavior
none	Default — no floating
left	Float to the left edge
right	Float to the right edge

Multiple Floats

/* Multiple floated elements stack next to each other */
.box {
    float: left;
    width: 150px;
    height: 150px;
    margin: 10px;
}

/* Result:
┌──────┐ ┌──────┐ ┌──────┐
│ Box1 │ │ Box2 │ │ Box3 │
│      │ │      │ │      │
└──────┘ └──────┘ └──────┘
Boxes sit side by side, wrapping to the next line if no room */

The Collapsing Parent Problem

<div class="parent">
    <div class="child" style="float: left;">Floated Child</div>
</div>

/* The parent COLLAPSES to zero height!
   Because the floated child is removed from flow,
   the parent has no content to determine its height. */

This is the biggest gotcha with floats. The solution is clearing, which we'll cover in the next episode.

Floated Image Gallery

.gallery img {
    float: left;
    width: 200px;
    height: 150px;
    margin: 5px;
    object-fit: cover;
    border-radius: 8px;
}

/* Images flow left to right, wrapping to the next row
   when the container width is reached */

Key Takeaways

• float removes an element from normal flow and shifts it left or right
• Inline content (text) wraps around floated elements
• Block elements ignore floats and flow behind them
• Multiple floats stack horizontally
• Floated children cause the parent to collapse — needs clearing
• Originally designed for text wrapping, not full page layouts