Skip to main content

Float

The float property in CSS is a powerful tool that was originally designed for wrapping text around images. Over time, it became a popular method for creating layouts and aligning elements before Flexbox and Grid became mainstream.

Basics of Float​

  • Purpose: The float property is used to place an element to the left or right side of its container, allowing other elements (like text) to wrap around it.

  • Values:

    • left: The element floats to the left of its container.
    • right: The element floats to the right of its container.
    • none: The default value, indicating no floating.
    • inherit: Inherits the float value from its parent.

Common Usage​

  1. Text Wrapping Around Images:

    img {
      float: left; /* or right */
      margin-right: 10px; /* Creates space around the image */
    }

    This is useful for flowing text around images in articles or blog posts.

  2. Creating Columns: Before Flexbox and Grid, float was often used to create multi-column layouts.

    .column {
      float: left;
      width: 50%;
    }

Clearing Floats​

  • Issue: Floating elements are removed from the normal flow of the document, which can affect the layout of surrounding elements.

  • Solution: Use the clear property to specify elements that should not be adjacent to floating elements on one or both sides.

    • clear: left; or right; or both;

  • Clearfix Hack: A common technique to clear floats within a container.

    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }

Considerations​

  • Legacy Tool:-- With the advent of Flexbox and Grid, float is less commonly used for layouts but remains important for text wrapping.

  • Collapsing Containers:-- Parent elements of floated elements can collapse. The clearfix hack is a common solution.

  • Overuse:-- Excessive use of float can lead to complex and fragile CSS, making maintenance difficult.