CSS Float

CSS Float

The float property in CSS is used to place an element to the left or right of its container, allowing other content to wrap around it. Originally used for wrapping text around images, it also served layout purposes before modern layout systems like Flexbox and Grid.

Syntax

Float Property Values

• left: Floats the element to the left.
• right: Floats the element to the right.
• none: Default. No float applied.
• inherit: Inherits the float value from its parent.

Example: Using float in Layout

Clearing Floats

Floated elements are removed from normal document flow. This may cause parent containers to collapse. To fix this:

Example using clear

Example using ::after clearfix (recommended)

Common Use Cases

• Wrapping text around images
• Two-column or multi-column layouts
• Sidebar alignment in legacy designs

Important Notes

• Floated elements do not expand their parent container unless cleared.
• Use overflow: auto or a clearfix to fix collapsing layout issues.
• Float is less responsive than Flexbox or Grid.

Key Takeaways

• float positions elements left or right, letting other content wrap.
• Use clear or clearfix methods to prevent layout collapse.
• Ideal for image wrapping and basic column layouts.
• For responsive designs, prefer Flexbox or Grid.