Зачем в шаблоне #middle:after {

[olgamar]

Всем доброй ночи! В процессе освоения CSS появился вопрос. Какую роль в шаблоне выполняет код


#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}

Казалось бы, все элементы в XHTML должны следовать друг за другом без промежутков. Однако, обнаружилось, что без этого пустого блока с нулевой высотой footer улетает наверх макета.
ПОЧЕМУ?!

 

[motek]

это не пустой блок, это фиксатор Вашего основного блока - по средством псевдо-класса добавляется точка, которая запрещает обтекание и визуально не видна

 

[olgamar]

Большое спасибо! Теперь поняла

 

[tigra60]

А там еще продолжение должно быть:

/*  ИЕ6 */
*html#middle {height:1%;}
/*  ИЕ7 */
*:first-child+html#middle {min-height:1px;}

Фабрики - крестьянам, землю - рабочим, ишакам - костыли!

P.S. Кстати, странно, что этот стиль присвоен идентификатору. Его лучше присвоить классу. Тогда этот класс можно назначить каждому блоку, в котором есть плавающие потомки. (Как известно, элементу может быть назначено несколько классов)
Очень удобно, семантично и не выпирает, как <div class="clear"></div>, или, что еще похуже, <br clear="all">

 

[olgamar]

Спасибо! В макете осталось от CSStemplator


#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}

Костыли надо добавить после блока?

поняла, в начало стилей, спасибо

 

[dimamen777]

#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;

а почему здесь высота 1 процент?

 

[olgamar]

рискую предположить, что это формальная величина, высота пропорционально зависит от наполнения блока

во всяком случае, у меня так

 

[tigra60]

а почему здесь высота 1 процент?

Это костылики для самизнаетекакого браузера.
подробности http://www.xiper.net/collect/html-and-css-tricks/glyuki-brauzerov/ie6/haslayout.html

P.S. Достойная фраза:
"Фабрики - крестьянам, землю - рабочим, ИЕ - костыли!"

 

[dimamen777]

header, nav, section, article, aside, footer {
display: block;
}
а почему здесь обязана быть блочная структура?

 

[tigra60]

Потому, что по умолчанию все элементы в HTML5 имеют стиль display:inline. (Не путать со стилями по умолчанию браузеров!)

Вообще, похоже, что это строка, вырванная из reset.css (как у Эрика Мейера). Откуда вы ее взяли?

Если вас всерьез волнуют такие тонкости, читайте спецификацию.

 

[dimamen777]

это все из шаблона csstempler,да и там есть уже ресет от мейера, только я все стер, а это оставил, потому что если это убрать то все складывается как карточный домик, но я так понял что это только для хтмл 5?