Здесь поможет
Исключения CSS: они позволяют обтекать текстом любой элемент, включая абсолютно позиционированный элемент. К сожалению, эта спецификация все еще находится в рабочем состоянии, и ни один браузер пока не поддерживает ее.
Вот фрагмент, иллюстрирующий, как CSS-исключения могут быть вам полезны. Как видите, здесь используется абсолютное позиционирование, а не плавающее, и все работает так, как вы хотите, за исключением того, что текст не переносится. Правило исключения wrap-flow, к сожалению, не действует.
.d1 {
position: relative;
border: 2px solid cyan;
min-height: 200px;
margin-bottom: 2em;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 1em;
}
.excl {
position: absolute;
top: 0;
right: 0;
width: 100px;
height:200px;
background-color: lime;
wrap-flow: both;
}
<div class="d1">
<div class="excl"></div>
<div class="txt">
<p>
Lorem ipsum
</p>
<p>
Nunc eu
</p>
</div>
</div>
<div class="d1">
<div class="excl"></div>
<div class="txt">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio massa, tempor auctor posuere et, consequat non velit. Suspendisse potenti. Proin hendrerit eu neque id varius. Morbi consequat dui neque, non fringilla dolor pretium vitae. Pellentesque congue nec justo vel mattis. Fusce lobortis turpis a urna elementum eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rhoncus sagittis lacus at dignissim.
</p>
<p>
Nunc eu rhoncus massa. Nam pretium pellentesque faucibus. Mauris fringilla erat et nunc feugiat hendrerit. Nullam bibendum faucibus quam ut rhoncus. Maecenas non orci dui. Suspendisse maximus feugiat augue, sit amet ultrices arcu egestas at. Phasellus eget libero purus. Suspendisse potenti. Nulla vestibulum diam at pharetra vehicula. Donec quis dignissim tellus. In dictum sagittis ex, euismod ultricies leo tempor vel.
</p>
<p>
Donec consectetur facilisis neque, eu dignissim massa interdum vel. Fusce vestibulum libero a ex malesuada, et pharetra risus gravida. Duis vehicula, dolor ut mattis sagittis, metus ex lacinia velit, sed interdum magna nisi eu magna. Aenean porttitor pulvinar lectus, sit amet efficitur ligula suscipit ut. Vivamus lobortis, felis at ultrices eleifend, risus ex ullamcorper lacus, nec aliquam orci sapien vitae elit. Suspendisse vitae nunc ante. Curabitur consequat diam et enim varius, quis mattis lectus posuere. Quisque sollicitudin, eros ut aliquet gravida, ipsum lectus consequat arcu, ac congue libero ante nec tellus. Mauris massa dolor, dapibus a metus eu, vehicula ultricies justo. Integer eu turpis non mauris finibus congue. Donec rhoncus felis in elit tempor lacinia. Ut placerat sodales libero, in laoreet nibh commodo quis.
</p>
<p>
Aliquam in lacus tempor, viverra quam in, interdum lorem. Aliquam bibendum, sem eget egestas iaculis, velit urna finibus est, a dapibus nulla orci at nibh. Cras eget ullamcorper nisl. Vivamus maximus, lorem a rutrum semper, eros orci auctor urna, a pharetra enim felis id arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam vitae consequat ipsum. Quisque egestas viverra elit, vel pulvinar enim. Vestibulum faucibus mattis sem sed placerat. Fusce pretium, mauris eget facilisis lobortis, lectus enim finibus lacus, a finibus orci odio at ante. Nullam non tincidunt turpis, ut tempor dolor. Aliquam sit amet augue eu orci cursus pulvinar eleifend et lacus. Nam imperdiet lectus quis urna fringilla convallis. Mauris pretium fringilla iaculis. Donec volutpat lacus urna, in convallis nisi tincidunt luctus. Maecenas ut augue metus. Aenean ornare erat eu auctor volutpat.
</p>
<p>
Praesent a odio enim. Proin tincidunt vulputate nibh, eget rhoncus arcu vulputate ultricies. Etiam nec magna nec est pharetra aliquet. Vivamus rhoncus convallis lectus at rhoncus. Nam elit risus, volutpat sit amet erat sit amet, fringilla tempus erat. Donec id diam sodales metus rutrum molestie eu ac erat. Mauris condimentum erat nec leo venenatis sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin quis sem mattis, pellentesque dui id, imperdiet justo. Donec id iaculis ante. Morbi maximus nibh eget convallis cursus. Suspendisse tristique felis et tempus vulputate. Morbi id tincidunt sem, eget vestibulum tortor.
</p>
</div>
</div>
Тем временем одно из предложений состоит в том, чтобы использовать flexbox, когда у вас есть только небольшое количество текста рядом с изображением, и использовать float, когда у вас есть больше текста. В противном случае вам просто придется выбирать между float или flex и жить с этим не совсем правильно, или выбрать другой вид.
Отвечает ли это на ваш вопрос? Как разместить текст и изображение рядом друг с другом в HTML?