Блочные элементы перекрываются с особенностями

Question

Я делаю свой первый проект с сеткой сингулярности, и я люблю его до сих пор. Тем не менее, у меня возникла странная проблема в разделе, где у меня есть <h2> а также <h3> элементы перекрываются... действительно трудно понять, в чем проблема.

Мой проект в разработке доступен по адресу: http://senseslabv3.brunomonteiro.mixture.io/

Первый <section> с class=intro,

Кто-нибудь знает, что это происходит? Спасибо за ваше время.

Answer 1

Как уже говорили другие, вам нужно очистить свои поплавки. По умолчанию стиль вывода Singularity - "Изоляция", что требует знания того, как следует очищать плавающие объекты (clear: left, clear: right, clear: both, clear: none). Сингулярность не предполагает явного (clear: none), что означает, что элементы сетки могут перекрываться, если не очищены должным образом. Это делается для того, чтобы придерживаться наиболее распространенной ментальной модели для метода вывода "Изоляция", в частности, для размещения блоков в дискретной точке сетки. Очистка ваших поплавков очистит их от края поля элемента, что особенно заметно при создании новых строк. См. Статью о сети разработчиков Mozilla на сайте Clear.

Обратите внимание, что очистка ваших поплавков и исправление ошибок, предложенные lolmaus, действительно делают разные вещи. Очистка вашего float очистит элементы для краев полей, в то время как очистка элемента гарантирует, что все его всплывающие дочерние элементы будут содержаться правильно.

Выходные данные Float придерживаются другой ментальной модели, которая состоит в том, чтобы ходить по ряду вашей сетки, и поэтому автоматически очищает ваши поплавки для вас. Если вы предпочитаете использовать стиль вывода Float по умолчанию, просто добавьте $output: 'float' в ваш файл Sass перед вызовом вашей сетки. Это изменит ваш глобальный контекст стиля вывода. Кроме того, вы можете использовать float-span использовать ментальную модель стиля вывода Float и вывод по запросу вместо grid-spanили передать $output-style: 'float' как вариант grid-span,

Ознакомьтесь с документацией по стилям вывода, диапазону вывода, диапазону с плавающей точкой и переопределениям контекста вgrid-span для более глубокого погружения в различные стили вывода и опции, доступные в Singularity.

Answer 2

Вместо безобразного <div style="clear: both;"></div> учти это:

.intro h2 {
  @include pie-clearfix; }

Или, если вы используете инструментарий:

.intro h2 {
  @extend %clearfix-micro; }

Мы могли бы лучше решить вашу проблему, если вы поделитесь своим кодом SASS.

Answer 3

Ясно, что оба должны быть объявлены где-то под вашим mixin-span-span. .tag h3 {clear: both;}

Answer 4

Это старый вопрос, но я столкнулся с проблемой. Ответ Снугуга работал отлично, но я хотел показать код, который работал для меня. (Не удалось добавить код в комментарий)

// Контейнер основного контента

.l-main {  
  @include breakpoint(80em) {
    @include grid-span(16, 3, 20);  
  }  
}

// Баннер полной ширины внутри контейнера содержимого. Мне нужно было это очистить, потому что есть несколько других небольших столбцов / сеток над и под баннером.

.b-banner {
  @include breakpoint(80em) {
    @include float-span(16, 1, last);
  }  
}