VOOZH about

URL: https://www.geeksforgeeks.org/css/css-layout-float-and-clear/

⇱ CSS Layout - Float and Clear - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

CSS Layout - Float and Clear

Last Updated : 23 Jul, 2025

CSS layout is used to control how elements are positioned and arranged on a webpage. The "float" and "clear" properties help in organizing content, ensuring proper alignment and preventing wrapping around elements.

Float Property

The CSS float property allows elements to be positioned to the left or right of their container, allowing inline content (like text) to wrap around it. It is commonly used to create layouts, such as columns, where the text or other elements wrap around floated items.

Syntax

.element {
float: left | right | none | inherit;
}
ValueDescription
leftFloats the element to the left side of its container.
rightFloats the element to the right side of its container.
noneRemoves the float and keeps the element in the normal flow.
inheritInherits the float property from its parent element.

1. float: left

Floats the element to the left side of its container.

2. float: right

Floats the element to the right side of its container.

3. float: none

Removes the float and keeps the element in the normal flow.

4. float: inherit

Inherits the float property from its parent element.

Clear Property

The CSS clear property controls the behavior of elements in relation to floated elements. It specifies whether an element should be placed next to or below floated elements.

Syntax

.element {
clear: left | right | both | none | inherit;
}
ValueDescription
noneNo effect on adjacent elements, allowing them to position freely.
leftForces the element below any left-floating elements.
rightForces the element below any right-floating elements.
bothForces the element below both left and right floating elements.
inheritInherits the clear property from its parent element.

1. clear: left

Prevents the element from being adjacent to left-floated elements.

2. clear: right

Prevents the element from being adjacent to right-floated elements.

3. clear: both

Prevents the element from being adjacent to both left and right-floated elements.

4. clear: none

Allows the element to be adjacent to floated elements (default behavior).

Best Practices for CSS clear Property

  • Use floats sparingly; prefer Flexbox or Grid for layouts.
  • Always clear floats to prevent layout issues.
  • Test designs across devices to ensure consistency.
Comment
Article Tags: