CSS

Posición

Float

Para que un elemento flote y los adyacentes lo envuelvan se utiliza float (y clear):

<body>
<section class="contenedor">
  <aside class="flota"></aside>
  <p>Este 1er párrafo está envolviendo al elemento verde que flota a a la izquierda. Si quisiéramos que flotara a la derecha habría que usar <code>float: right;</code>.</p>
  <p id="p2">Este 2do párrafo también envuelve al elemento flotante. Si no quisieramos que flotara, habría que poner a este elemento la propiedad CSS <code>clear: both;</code>.</p>
</section>
</body>
.flota {
  float: left;
  width: 80px;
  height: 140px;
  background-color: green;
  margin-right: 10px;
  margin-bottom: 10px;
}
.contenedor {
  width: 280px;
  border: 5px solid gray;
  padding: 10px;
  margin: 18px 0 0 10px;
}
#p2 {
  /* clear: both; */
}
p {
  margin: 0 0 10px 0;
  font: 15px sans-serif;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}