CSS Float Property

Float removes an element from normal flow and positions it to the left or right, with text wrapping around it.

Float and Clear

float: left or right positions element to that side.

Content flows around floated elements.

clear: left, right, or both prevents wrapping.

Floated elements are removed from normal document flow.

Modern layouts prefer Flexbox and Grid over float.

/* Float image left */
img.left {
  float: left;
  margin-right: 15px;
}

/* Float image right */
img.right {
  float: right;
  margin-left: 15px;
}

/* Clear floats */
.clear {
  clear: both;
}

/* Clearfix for containers */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}