<picture class="nudge-float" style="--nudge-float: 100px">
  <img src="https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=160&d=retro&r=pg"/>  
</picture>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium consectetur quae quam mollitia, laboriosam quos repellat. Tempore, quod? Quam ex at repellendus maxime eveniet perspiciatis doloremque hic corporis molestias quos minima dolore quidem, amet autem similique eos ad ipsam architecto tempora non est voluptatum eligendi veniam. Magnam corporis ipsa odio veniam incidunt suscipit doloremque et inventore quam voluptatum sit quaerat autem, saepe odit nesciunt magni. Amet omnis quam vitae esse totam saepe veniam alias dignissimos? Dolore nam non ratione dignissimos voluptatem laudantium, magnam, sequi ut eum excepturi, cupiditate tempore repudiandae culpa dolorem autem blanditiis sunt a quisquam? Sint, enim reprehenderit sit rem voluptates, corrupti, aliquam quam provident doloremque distinctio adipisci error earum eveniet magnam placeat quibusdam. Ab, dolor maiores? Adipisci qui ab rerum eligendi dolorum doloribus, consequatur sit dolor, at, beatae molestias nemo quasi optio voluptatum voluptas maiores earum neque a amet molestiae exercitationem vel asperiores. Qui iusto fuga aut vero laborum, esse sapiente dolorum nesciunt quos aspernatur architecto quae culpa nulla porro molestias deserunt unde? Nam id repellat quidem inventore veritatis praesentium voluptatum ullam qui saepe ab odio similique voluptate recusandae nemo quas possimus unde, numquam accusamus! Rem, in! Quis commodi tenetur sit amet est voluptas enim repellat quas!</p>

<p>A riff on <a href="https://codepen.io/chriscoyier/pen/53b90cf53e269b1589114e616ffbddbf">Float cutout in middle of paragraph.</a></p>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

body {
  font-family: Montserrat, sans-serif;
  margin: 3rem;
  background: #FFF8E1;
  max-width: 60ch;
}

img {
  float: left;
  clear: left;
  margin: 1em;
  margin-left: 0;
}

.nudge-float::before {
  content: "";
  float: left;
  width: 0;
  height: var(--nudge-float);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.