Float

float places an element on the left or right side of its container, allowing other content to wrap around it.

<div id="float-example">
  <div class="float">
    I'm floating!
  </div>
  <div class="float">
    Also floating!
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit augue a nisl fermentum ultricies.
  Curabitur porta purus in velit sagittis placerat. Mauris dictum, leo ut pulvinar condimentum, lorem urna tristique nisl,
  et posuere dolor orci ut massa. Vestibulum imperdiet, nulla ut condimentum pellentesque, magna massa feugiat sapien,
  sed rutrum felis dui et erat.
</div>

#float-example .float {
  width: 100px;
  height: 50px;
  background-color: gold;
  float: left;
  margin: 10px;
}

Basic Concepts

A floating element is one whose float value is not none.

An element will float until it hits the left/right side of its container, or until it hits another floating element.

Float Implies Block Layout

float implies the use of the block layout. The browser changes "inline" display values of floating elements to the block variants, e.g.:

• display: inline → display: block
• display: inline-block → display: block
• display: inline-flex → display: flex
• display: inline-grid → display: grid

Clearing Floats

Specifying clear property on an element (e.g. clear: left) will move the element down such that it does not wrap around floating elements on the cleared side.

Float Properties

float

Sets how the element floats. Possible values:

• none — the element does not float (default)
• left — the element floats to the left
• right — the element floats to the right
• inline-start — the element floats to the start side of the writing direction
• inline-end — the element floats to the end side of the writing direction

clear

Specifies which side(s) to clear of floats. (The element will move down such that it does not wrap around floating elements on the cleared side.)

• none — don't clear floats (default)
• both — clear floats on both sides
• left — clear floats on the left side
• right — clear floats on the right side
• inline-start — clear floats on the start side of the writing direction
• inline-end — clear floats on the end side of the writing direction

References

• float (MDX) — https://developer.mozilla.org/en-US/docs/Web/CSS/float