Смотрите по задаче и предполагаемой аудитории. Если аудитория — чисто гики с новыми браузерами, то смело делайте на гридах с фолбэком на одноколоночный мобильный вариант (как советуют здесь). Если для широкой аудитории с пренебрежимой долей IE9- — делайте на флексбоксах. Если для госконторы, Китая или еще какой-то специфической аудитории с большой долей старых IE — лучше перестраховаться и сделать на флоатах. Но это именно исключение, для типичных случаев флексбоксы сегодня — золотая середина.

P.S. Всё вышесказанное — именно про раскладку блоков страницы. По прямому назначению (обтекание элементов текстом внутри блоков) флоаты по-прежнему актуальны (особенно в сочетании с новыми возможностями типа shape-outside).

На макете видна именно сетка, которая напрямую переносится (и просится) в CSS Grid. Причем такая, с которой справится и старая версия гридов, которая есть в IE10+ — с явной привязкой каждого элемента к конкретной области.

Как вариант, сделать 2 вложенных анимации. Сам объект двигать вверх-вниз с замедлением движения в середине, а контейнер с этой анимацией двигать линейно по горизонтали. Но насколько это будет эффективно — надо тестировать.

Закрывающий тег для <p> опционален. Алгоритм парсинга по стандарту автоматически неявно подставляет </p> перед любым элементом, который в HTML4 называли «блочным» (сейчас их называют «non-phrasing flow content»). А потом парсер видит бесхозный явный закрывающий тег и исправляет эту ошибку, добавляя перед ним открывающий.

Если нужен контейнер для формы, лучше использовать <div>. Но с большой вероятностью это не нужно, форма сама по себе контейнер, стили можно навешивать прямо на нее.