HTML / CSS разрывы абзацев, оставьте <p> полностью с плавающим изображением или без него

У меня есть плавающий раздел изображения / текста:

<div>
  <img style = "margin: 0 10 10 10;float: left;" src = "img/index.png"/>
  <p>...<br/>...</p>
  <p>...<br/>...</p>
  ...
</div>

Первый <p> правильно расположен рядом с изображением. В зависимости от количества / длины <p>, изображения и размера экрана последующие <p> могут - или не могут - «поместиться» (целиком) рядом с изображением.

Я ищу решение (на основе pref. Css), при котором любой <p> (кроме первого), который не помещается полностью рядом с изображением, помещается под ним (т.е. за исключением первого, <p> не ' break ', чтобы начать перенос изображения под изображением' на полпути ').