CSS float Property

CSS float Property

The float property in CSS positions elements by making them float to the left or right within a container. It is commonly used for text wrapping, layouts, and image positioning.

1. Syntax

selector {
  float: none | left | right | inherit;
}

Value	Description
left	Floats the element to the left of its container.
right	Floats the element to the right of its container.
none	Default value; the element does not float.
inherit	Inherits the float value from its parent.

2. Basic Usage

✅ Floating an Image to the Left

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

✅ The image floats to the left, and the text wraps around it.

<img src="image.jpg" alt="Example Image">
<p>This text wraps around the floated image.</p>

✅ Floating an Image to the Right

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

✅ The image floats to the right, with text wrapping around it.

3. Floating Multiple Elements for Layouts

✅ Creating a Two-Column Layout

.left-column {
  width: 50%;
  float: left;
  background: lightblue;
}

.right-column {
  width: 50%;
  float: right;
  background: lightgreen;
}

<div class="left-column">Left Column</div>
<div class="right-column">Right Column</div>

✅ Creates a two-column layout using float.

4. Clearing Floats (clear Property)

Floating elements can affect the layout of surrounding elements. Use clear to fix layout issues.

✅ Clearing Floats with clear: both;

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

<div class="container clearfix">
  <div class="left-column">Left</div>
  <div class="right-column">Right</div>
</div>

✅ This prevents overlapping or collapsing issues.

5. Best Practices & Alternatives

✔ Use flexbox or grid for modern layouts instead of float.
✔ Use float only for text wrapping or legacy layouts.
✔ Always clear floats to avoid layout issues.