How do floating elements (floats) work in CSS?

Floating elements are taken out of the normal document flow and shifted to the left or right. Other elements flow around them.

Features:

• Shift: An element with float: left; shifts to the left, and all subsequent elements flow around it on the right. An element with float: right; shifts to the right, and other elements flow around it on the left.
• Container height: Initially, the parent container does not account for the height of floating children, which can lead to "collapse".
• Width: The floating element becomes block-level, and its width is determined by its content unless explicitly set.
• Margin: You can use margin to create spacing around the floating element.
• Clear: The clear property prevents wrapping. clear: left; disallows wrapping on the left, clear: right; on the right, clear: both; on both sides. Typically applied to an element after the floated elements.

Example of using float and clear:

<div class="container">
  <img src="image.jpg" alt="Float Me" class="float-left">
  <p>This text will flow around the image.</p>
  <div class="clear"></div> <!-- Clear the float -->
  <p>This text will be below the image.</p>
</div>

.float-left {
  float: left;
  margin-right: 10px; // Right margin
}

.clear {
  clear: both; // Clear the float
}

Methods to clear float (besides clear):

• Overflow: Adding overflow: hidden; or overflow: auto / scroll; to the parent element makes it account for the height of floating children.
• Pseudo-element ::after: A more modern and flexible method.

.container::after {
  content: "";
  display: table; // Or block
  clear: both;
}