float: left|right вынимает элемент из обычного потока частично: следующие строки текста обтекают его. Родитель может «схлопнуться» — нужны clearfix (clear, overflow, flow-root).
img.left { float: left; margin: 01rem1rem0; }
Сегодня
Для сеток почти всегда Flexbox/Grid. float оставляют для обтекания текста вокруг изображения/цитаты. clear: both — сброс обтекания.
