What are floating elements (floats) in CSS?

Float in CSS is a property that allows an element to 'float' to the left or right of the content that wraps around it.

Main characteristics:

• Offset: An element with the applied float property shifts to the left or right edge of its parent container (or another float element).
• Wrapping: Normal block or inline content (text, images) wraps around the floating element.
• Flow context: Floating elements are partially taken out of the normal document flow, but they influence the positioning of other elements.
• Usage: Originally used for organizing columns or placing images with text around them. In modern layout, Flexbox or Grid are more commonly used.

Typical values of the float property:

• left: The element floats to the left.
• right: The element floats to the right.
• none: The element does not float (default value).
• inherit: Inherits the value from the parent.
• initial: Sets the default value.

Problems with float:

• Parent collapsing: A parent container containing only floating elements may collapse in height.
• Clearing: To prevent wrapping by subsequent elements, the clear property should be used.

.image-float {
  float: left; /* The image will float to the left */
  margin-right: 10px; /* Margin to the right of the image */
}

.text-content {
  /* This text will wrap around the image */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Clearing the float after floating elements */
}