Prev Next

CSS Float

The float property was historically used for page layouts, moving elements to the left or right and letting other content wrap around them. Today, float is often used for smaller tasks like wrapping text around images. Modern CSS layout techniques (Flexbox, Grid) have largely replaced float for major layouts.

Key Topics

  • Float Left or Right
  • Content Wrapping
  • Avoiding Float for Complex Layouts

Example

float: left; moves an element to the left, and content flows around it on the right side.

img {
    float: left;
    margin: 0 10px 10px 0;
}

Explanation: The image floats on the left, and text wraps on the right, creating a neat, magazine-like layout for images and paragraphs.

Key Takeaways

  • Simplicity: Float is best for simple tasks like text wrapping.
  • Legacy: Floats were once a main layout tool, now mostly replaced by modern layouts.
  • Balance: Use float sparingly to avoid complex and fragile layouts.
Prev Next