float y clear

float saca un elemento del flujo normal y lo coloca a un lado, de forma que el texto lo rodea. Antes se usaba para maquetar columnas; hoy su uso natural es que el texto envuelva una imagen.

float: left o right: el elemento se desplaza a ese lado y el contenido en línea fluye a su alrededor.
clear: impide que un elemento se coloque junto a un float y lo baja por debajo de él.
Un contenedor no crece para contener sus floats; display: flow-root soluciona ese problema.
Para colocar columnas o tarjetas usa flex o grid: float no está pensado para eso.

Ejemplo

Cambia float en la clase item y observa cómo el texto pasa a rodearla por un lado u otro.

Selecciona float:

noneleftright

ResultadoEn vivoAncho del contenedor100%

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;
}

Edita el código o usa los selectores: el resultado cambia al instante.