What are floating elements (float) in CSS?

Floating elements (float) in CSS are a property that allows moving an element out of the normal document flow and positioning it to the left or right of its container. Adjacent elements and text will wrap around this floating element.

Main values of the float property:

• left: The element floats to the left.
• right: The element floats to the right.
• none: The element remains in the normal flow (default value).
• inherit: Inherits the value from the parent.

Usage examples:

.float-left {
  float: left; /* The element will float to the left */
  margin-right: 10px; /* Add right margin for text */
}

.float-right {
  float: right; /* The element will float to the right */
  margin-left: 10px; /* Add left margin for text */
}

Behavior features:

• The floating element is removed from the standard document flow but affects the positioning of neighboring elements and text.
• The parent of a floating element can "collapse" because floating children do not influence its height in the normal flow. Techniques like clear, overflow: hidden, or Flexbox/Grid are used to prevent this.
• The clear property specifies on which side floating elements should not be present:

  .clear-left {
    clear: left; /* The element will be positioned below any element floating to the left */
  }
  
  .clear-right {
    clear: right; /* The element will be positioned below any element floating to the right */
  }
  
  .clear-both {
    clear: both; /* The element will be positioned below any floating element */
  }
  

Historically, floating elements were used to create multi-column layouts, but nowadays Flexbox or CSS Grid are preferred for this purpose due to their better flexibility and predictability. However, float remains useful for wrapping text around images or other elements.