Еще один мини-гайд, который поможет разобраться с поведением флоатов и закрепить изученный материал. Задание понятно - собрать пазл путем правильного порядка расположения контейнеров 
в html-коде.
В данной инструкции я опишу подробно более понятный метод решения, нежели тот, который использовал я.
Итак приступим.
Для начала можете взять ручку и лист бумаги, нарисовать пазл и отметить цифрами каждый блок из примера чтобы не путаться и не запоминать цвета, а еще так вам будет легче понимать в каком порядке расположить наши div-контейнеры.
Первым делом найдем наш “незафлоаченый” квадрат (фиолетовый).
Мой вариант решения предполагает сбор пазла справа налево. Первый справа у нас идет красный прямоугольник прилипающий к правому краю (имеющий float: right) - это наш block5 
, располагаем его в HTML-коде выше всех остальных контейнеров, сразу после него справа налево идет зеленый прямоугольник (тоже нужен с float: right) - таким параметрам отвечает block7 
, размещаем следующим после 5-го блока в HTML-коде.
Теперь нам нужно разобраться с нашим незафлоченным блоком. В задании сказано: для того, чтобы флоатный блок мог обтекаться обычным, он должен в коде располагаться выше обычного. Получается, для того чтобы наш фиолетовый block3 
смог обтекать предыдущий блок (ведь мы решаем задачу справа налево), то в HTML- коде он должен идти после того блока, которого хочет обтекать 
Следующим у нас идет оранжевый block6 
с правым флоатом, значит он располагается ниже по списке.
Идем дальше и видим красный и синий вертикальные прямоугольники, смотрим в CSS-редакторе и видим, что с правым флоатом таких нет, зато есть с левым, меняем нашу логику построения в обратном порядке, теперь начинаем мыслить слева направо.
Первым идет синий прямоугольник block1 
, а следом за ним красный block4 
. В таком порядке (сначала 1, за ним 4) располагаем их в нашем HTML-коде. Дальше у нас идет зеленый прямоугольник с левым флоатом block8 
, а сразу за ним наш горизонтальный синий прямоугольник с правым флоатом block2 
.
Вот мой вариант решения:
<div class="puzzle"> <div class="block5"></div> <div class="block7"></div> <div class="block3"></div> <div class="block6"></div> <div class="block1"></div> <div class="block4"></div> <div class="block8"></div> <div class="block2"></div> </div>
Задание выполнено на 100%.
На самом деле вариантов решения есть несколько (например, если поменять местами block8 и block2 пазл тоже соберется). Есть так же несколько вариантов решения. Например я, сначала задал незафлоаченный фиолетовый блок, а потом перед ним дописывал 5 и 7 блоки, но не стал описывать такой метод, он может показаться не слишком понятным, по-этому я пошел логичным путем, представил, что если бы это был не пазл, а сайт, то там было бы легче идти по порядку, нежели дописывать потом дополнительные div поверх остальных, а лучше сразу все размещать в правильном порядке.
Спасибо за внимание, я старался 