❮ Previous Next ❯

CSS Float & Clear

  • Learn CSS float and clear to align elements side by side and control layout flow.

  • What is CSS float ?

    The CSS float property is used to move an element to the left or right, allowing text or inline content to wrap around it.

    In simple words:

    float pushes an element to one side and lets other content flow around it.

    Important note:
    float was not designed for full layouts.
    It was originally created to wrap text around images.

    Purpose of CSS Float

    Wrapping Content Around Elements

    The main use of float is to allow text to wrap around elements like images.

Purpose of CSS Float

float is used to position elements left or right so that surrounding text can wrap around them. 

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

  • Image moves to the left
    Text flows neatly around it

    Real-life comparison:
    Text wrapping around an image in a newspaper article.

    Float Values in CSS

    CSS mainly supports these float values:

    • float: left;
    • float: right;
    • float: none; (default)

Float Left Example

float: left; moves an element to the left side, allowing other content to wrap around it. 

.box {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
}
  • Element sticks to the left side

Float Right Example

float: right; moves an element to the right side of its container, allowing surrounding content to wrap around it. 

.box {
  float: right;
}

  • Element sticks to the right side

    Real-life comparison:
    Boats floating to available space on water.

    Problems with CSS Float 

    When elements are floated:

    Parent container height collapses
    Layout becomes difficult to manage
    Clearing floats becomes necessary
    Not responsive-friendly

    Because of these problems, floats are mostly replaced by Flexbox and Grid today.

    What is CSS clear ?

    The clear property is used to stop float behavior and prevent elements from wrapping around floated elements.

    In simple words:

    clear tells an element: “Do not sit next to floated elements.”

    Purpose of CSS Clear

    Stop Wrapping Around Floated Elements

Purpose of CSS Clear

clear is used to stop elements from wrapping around floated elements and forces them to move below the float. 

.clear {
  clear: both;
}

  • Element moves below floated items

    Real-life comparison:
    Stopping traffic so pedestrians can cross safely.

    Clear Values

    CSS supports these clear values:

    • clear: left;
    • clear: right;
    • clear: both;
    • clear: none; (default)

Classic Float + Clear Layout Example

This example uses float to place elements side by side and clear to keep the footer below them. 

<!DOCTYPE html>
<html>
<head>
    <title>Float + Clear Layout</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            width: 100%;
        }

        .left {
            float: left;
            width: 50%;
            background-color: lightcoral;
            padding: 20px;
            box-sizing: border-box;
        }

        .right {
            float: right;
            width: 50%;
            background-color: lightgreen;
            padding: 20px;
            box-sizing: border-box;
        }

        .footer {
            clear: both;
            background-color: lightgray;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

  • What Happens ?

    Two columns float side by side
    Footer appears below both columns

    The Clearfix Problem

    When all child elements are floated, the parent container collapses.

Clearfix Problem

When all child elements are floated, the parent container collapses because floated elements are removed from normal document flow. 

.container {
  background-color: yellow;
}
  • Background disappears
    Parent has no height

Clearfix Hack

The clearfix hack fixes parent collapse by adding a pseudo-element that clears floated children. 

.container::after {
  content: "";
  display: block;
  clear: both;
}

  • Parent height is restored

    Real-life comparison:
    Using support beams to hold a structure upright.

    Why Float & Clear Are Mostly Replaced

    Modern CSS layout tools:

    • Flexbox → one-dimensional layouts
    • Grid → two-dimensional layouts

    Problems with Float

    Complex
    Not intuitive
    Needs clearfix
    Hard to maintain

    Advantages of Flexbox & Grid

    Clean code
    Responsive by default
    Easy alignment
    No clearfix required

    When Float is Still Used Today

    Wrapping text around images
    Legacy projects
    Simple image alignment

    Common Mistakes

    Using float for entire layouts
    Forgetting to clear floats
    Ignoring parent height collapse
    Mixing float with flex/grid unnecessarily

    Use float only for text wrapping
    Always clear floats when used
    Prefer Flexbox or Grid for layouts
    Learn float for interviews and legacy code

    • Float → pushes element to a side
    • Clear → stops floating behavior
    • Float causes wrapping
    • Clear fixes wrapping
    • Modern layouts use Flexbox/Grid

    float wraps content around elements
    clear stops float behavior
    Float was used for layouts in the past
    Now mostly replaced by Flexbox & Grid
    Still important for CSS fundamentals & interviews

❮ Previous Next ❯