float and clear

float takes an element out of normal flow and moves it to one side, so the text wraps around it. It used to build column layouts; today its natural use is wrapping text around an image.

float: left or right: the element moves to that side and inline content flows around it.
clear: prevents an element from sitting next to a float and moves it below.
A container does not grow to contain its floats; display: flow-root fixes that.
To place columns or cards use flex or grid: float is not meant for that.

Example

Change float on the item class and watch the text wrap around it on one side or the other.

Select float:

noneleftright

ResultLiveContainer width100%

html

<div class="container">
  <div class="item">float</div>
  <p class="text">
    Text flows around the floated box. When float is none, the box stays in the
    normal flow and the text starts below it. With left or right, the box moves to
    that side and the lines of text wrap around it until they pass its bottom edge.
  </p>
</div>

<div class="container">
  <div class="item">float</div>
  <p class="text">
    Text flows around the floated box. When float is none, the box stays in the
    normal flow and the text starts below it. With left or right, the box moves to
    that side and the lines of text wrap around it until they pass its bottom edge.
  </p>
</div>

css

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.item {
  background: #d9d2f5;
  float: none;
  margin: 0.25rem 1rem;
  padding: 1.5rem 1rem;
  width: 7rem;
}

.text {
  background: none;
  color: inherit;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

.container {
  border: 1px solid #2b7de0;
  padding: 0.5rem;
}

.item {
  background: #d9d2f5;
  float: none;
  margin: 0.25rem 1rem;
  padding: 1.5rem 1rem;
  width: 7rem;
}

.text {
  background: none;
  color: inherit;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

Edit the code or use the selectors: the result updates instantly.