CSSCSS Tutorial

Lesson

CSS Float

10 min reading

Free Course

CSS Float: Floating Images and Clearing Layout Wrappers

The legacy CSS float property pushes an element to the left or right of its container, allowing text and inline elements to wrap around it. clear prevents elements from floating alongside preceding floated elements.

Float and Clear Syntax

Float pushes elements horizontally:

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

/* Clear float wrap */
.clear-both { clear: both; }

/* Modern Clearfix Hack */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Float mechanics explained:

float: left / right: Shifts elements to the left or right edge of their parent container.
Text Wrapping: Adjacent inline content and paragraphs flow around floated elements.
Parent Collapse: Parent containers collapse in height when all child elements are floated unless a clearfix hack is applied.

Text Wrapping Around Floated Box

flowchart LR
    A["Float Element (float: left)"] --> B["Paragraph Text Paragraph Text Paragraph Text Wraps Right"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Float Demonstration</title>
    <style>
        .article-card {
            background-color: #1e293b;
            padding: 1.5rem;
            border-radius: 8px;
            max-width: 550px;
        }
        /* Clearfix hack */
        .article-card::after {
            content: "";
            display: table;
            clear: both;
        }
        .float-thumb {
            float: left;
            width: 120px;
            height: 90px;
            object-fit: cover;
            border-radius: 6px;
            margin-right: 1rem;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">

    <div class="article-card">
        <img src="https://images.unsplash.com/photo-1518770660439-4636190af475" alt="Thumbnail" class="float-thumb">
        <h3>Article Title with Floated Image</h3>
        <p style="color: #94a3b8; margin: 0;">This paragraph text flows smoothly around the left-floated image thumbnail inside the container box.</p>
    </div>

</body>
</html>

Best Practices

Use float primarily for text wrapping around article images: Reserve float for inline editorial article imagery wrapping.
Use Flexbox or Grid for page layouts instead of float: Avoid building multi-column page layouts with float; use Flexbox or CSS Grid.
Always apply a clearfix hack to parent containers of floated items: Prevents container height collapse bugs.

Self-Check Challenge

Create a .clearfix::after rule setting content: ""; display: table; clear: both;!

Save Your Progress

Unlock Your
Full Potential.

Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.

Quick Access With

Enterprise-Grade Security Protocol

Recommended Courses & Books

Try it Yourself

Experiment with the code from this lesson in our interactive playground.

Open Playground

Lesson Recap Quiz Available

Test Your Knowledge

You've completed this section! Take a quick 5-question quiz to check your understanding.

Stuck on this lesson?

Join our community of senior developers.

Ask in Forum

CSSCSS Tutorial

Lesson

CSS Float

10 min reading

Free Course

CSS Float: Floating Images and Clearing Layout Wrappers

The legacy CSS float property pushes an element to the left or right of its container, allowing text and inline elements to wrap around it. clear prevents elements from floating alongside preceding floated elements.

Float and Clear Syntax

Float pushes elements horizontally:

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

/* Clear float wrap */
.clear-both { clear: both; }

/* Modern Clearfix Hack */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Float mechanics explained:

float: left / right: Shifts elements to the left or right edge of their parent container.
Text Wrapping: Adjacent inline content and paragraphs flow around floated elements.
Parent Collapse: Parent containers collapse in height when all child elements are floated unless a clearfix hack is applied.

Text Wrapping Around Floated Box

flowchart LR
    A["Float Element (float: left)"] --> B["Paragraph Text Paragraph Text Paragraph Text Wraps Right"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Float Demonstration</title>
    <style>
        .article-card {
            background-color: #1e293b;
            padding: 1.5rem;
            border-radius: 8px;
            max-width: 550px;
        }
        /* Clearfix hack */
        .article-card::after {
            content: "";
            display: table;
            clear: both;
        }
        .float-thumb {
            float: left;
            width: 120px;
            height: 90px;
            object-fit: cover;
            border-radius: 6px;
            margin-right: 1rem;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">

    <div class="article-card">
        <img src="https://images.unsplash.com/photo-1518770660439-4636190af475" alt="Thumbnail" class="float-thumb">
        <h3>Article Title with Floated Image</h3>
        <p style="color: #94a3b8; margin: 0;">This paragraph text flows smoothly around the left-floated image thumbnail inside the container box.</p>
    </div>

</body>
</html>

Best Practices

Use float primarily for text wrapping around article images: Reserve float for inline editorial article imagery wrapping.
Use Flexbox or Grid for page layouts instead of float: Avoid building multi-column page layouts with float; use Flexbox or CSS Grid.
Always apply a clearfix hack to parent containers of floated items: Prevents container height collapse bugs.

Self-Check Challenge

Create a .clearfix::after rule setting content: ""; display: table; clear: both;!

Save Your Progress

Unlock Your
Full Potential.

Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.

Quick Access With

Enterprise-Grade Security Protocol

Recommended Courses & Books

Try it Yourself

Experiment with the code from this lesson in our interactive playground.

Open Playground

Lesson Recap Quiz Available

Test Your Knowledge

You've completed this section! Take a quick 5-question quiz to check your understanding.

Stuck on this lesson?

Join our community of senior developers.

Ask in Forum

CSS Float

CSS Float: Floating Images and Clearing Layout Wrappers

Float and Clear Syntax

Text Wrapping Around Floated Box

Practical Code Example

Best Practices

Self-Check Challenge

Unlock Your Full Potential.

Recommended Courses & Books

Try it Yourself

Test Your Knowledge

Stuck on this lesson?

CSS Float

CSS Float: Floating Images and Clearing Layout Wrappers

Float and Clear Syntax

Text Wrapping Around Floated Box

Practical Code Example

Best Practices

Self-Check Challenge

Unlock Your Full Potential.

Recommended Courses & Books

Try it Yourself

Test Your Knowledge

Stuck on this lesson?

Unlock Your
Full Potential.

Unlock Your
Full Potential.