? float Property in CSS

The float property is used to position elements to the left or right of their container, allowing text and inline elements to wrap around them — a classic layout technique before Flexbox and Grid became popular.

Syntax

.element {  float: left | right | none | inline-start | inline-end;}

• left: Floats the element to the left.

• right: Floats the element to the right.

• none: Default; element does not float.

• inline-start / inline-end: Logical properties (depends on writing direction).

How float Works

• Floated elements are taken out of the normal document flow but still affect inline content wrapping.

• Non-floated block elements will wrap around the floated element.

• Parent containers do not automatically expand to contain floated children (can cause layout issues).

Example: Image with Text Wrapping

<img src="image.jpg" alt="Example" class="float-left" /><p>This paragraph wraps around the floated image on the right side. Lorem ipsum dolor sit amet...</p>

.float-left {  float: left;  margin: 0 15px 15px 0;  width: 150px;}

Clearing Floats

Floated elements can cause container collapse because the container ignores their height. Use clear fixes:

1. Clear float on next element

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

Add .clearfix class to the container.

2. Use clear property on a block element

.clear {  clear: both;}

Add an element with this class after floated elements.

Notes

• Floats were originally for text flow around images.

• They became popular for multi-column layouts but are mostly replaced by Flexbox/Grid now.

• Still useful for simple wrapping and floats inside text.

If you want, I can show you how to build classic float layouts or how to transition float layouts to flexbox!