Перекрытие Div несмотря на поплавок

Question

Я пытаюсь это сделать.

с этим сассом.

#map { 
    @include grid-span(8,1); 
} 

#form { 
    @include grid-span(4,9); 
} 

#info { 
    @include grid-span(8,1); 
} 

Проблема: #form и #map div перекрываются.

Это на 12 колонок сетки.

Я знаю, что мне нужен ясный и плавающий. Пробовал много комбинаций. Я прочитал ссылку на похожие вопросы по поплавкам и изоляции. Все еще не понимаю. Пожалуйста, просветите.

Answer 1

Что вы ищете для Clears, как вы отметили.

В сингулярности для выходных стилей float, isolation и calc, все элементы, прикрепленные к сетке всплывают left, если пролет не заканчивается на последнем столбце в строке, и в этом случае он плавал right. Это означает, что, учитывая ваш пример, #map и #info плавают влево и #form плавают вправо.

Очистка может показаться сложной, но я нахожу, что просто говорящие вслух помогают. clear: left или «Очистить левый» означает «Очистить все, что осталось влево». clear: right или «Clear right» - «Очистить все, что плавало вправо». clear: both или «Очистить оба» - «Очистить все, что плавало как влево, так и вправо». clear: none или «Clear None» - «Очистить ничего, плавать влево или вправо». В этом случае «все» - это «все элементы брата, которые передо мной».

Имея это в виду, то, что вы ищете, это ясно #map. #map плавает left, поэтому вы должны добавить clear: left в ваш #info. Это очистит #map, но не добавит поля, который вы ищете. К счастью, проценты, даже если они используются для верхнего/нижнего, по-прежнему основаны на браузера, поэтому, если вы хотите, чтобы один и тот же желоб между #info и #main у вас между ними и #form, вам нужно только добавить margin-top: gutter-span();#info.

В конце концов, это код, который вы бы ветер, имеющий:

#map { 
    @include grid-span(8,1); 
} 

#form { 
    @include grid-span(4,9); 
} 

#info { 
    @include grid-span(8,1); 
    clear: left; 
    margin-top: gutter-span(); 
} 

Вот вилка вашего SassMesiter, showing it in action