Вёрстка с применением сетки на float

Добрый день необходимо сверстать страницу с применением float. Принципиально знание данной технологии и высокий уровень вёрстки. 

 вот список задач

1. Виджет Колонки. Он устроен следующим образом: есть родительский элемент row, в нем расположены колонки (col) с выравниванием по левому краю. Если так делать, то родительский элемент принимает нулевую высоту.

А нам нужно чтобы родительский блок row был высотой с дочерние колонки.

Решение должно быть универсальным и грамотным, чтобы работало на всех основных браузерах.

http://prntscr.com/psn78p

2. Составить файл normolize.css для того чтобы сбросить все св-ва элементов которые установлены в браузерах по умолчанию.

У ВФ вот такой файл http://prntscr.com/psocjf

3. Как сделать так чтобы в редакторе у элемента Body не добавлялся маржин от первого дочернего элемента (может он там как-то компенсируется через скрипт)?

У заголовка H1 есть margin-top: 20px

http://prntscr.com/psof3n

Этот маржин воспринимается тегом body 

http://prntscr.com/psogg9

Но в редакторе данного маржина нет и элемент Body занимает все пространство.

Нужно понять как это сделано и сделать нам.

http://prntscr.com/psn8do

Потому что в инспекторе отступ есть, но в редакторе его как бы нет.

https://control.pixli.app/admin/editor/

актуальная ссылка на редаткор