Некоторые сомнения, связанные с явным свойством на нижнем колонтитуле в нетбуке

Я использую следующий фиксированный tabless-макет с использованием HTML + CSS: http://onofri.org/example/WebTemplate/

(Я должен завершить некоторые настройки)

В этом макете есть два поплавковых столбца #content и #sidebar, и под этими столбцами помещается нижний колонтитул div #footcontainer

Итак, я должен очистить элементы, которые я бы разместил под столбцами буксировки (вернуть элементы в нормальный поток документа), для этого я использую явное свойство CSS.

Я читал, что могу сделать это разными способами.

В моем примере я создал пустой div с идентификатором clearer2, который имеет следующие настройки CSS:

#clearer2{
 clear: both;
}

Это хорошо работает, но я знаю, что я мог бы также прямо очистить нижний колонтитул, таким образом:

#footcontainer {
 clear: both;
 width: 100%;
 min-height: 200px;
 height: auto !important;
 height: 200px;
 background: #4f4f4f url(../images/bgfooter.jpg) repeat-x 0 0;
 box-shadow: 0 -13px 25px 5px #b2b2b2;
}

На логическом уровне должно быть одно и то же, потому что я установил четкость: both; свойство на элементе, а затем это свойство действует для всех последующих элементов. Но, читая онлайн, мне кажется, что первое решение лучше второго. Почему лучше создать новый элемент (как пустой div), который очистится, тогда сделайте это непосредственно на соответствующем элементе (в примере div #footercontainer)

Решение, которое я использую, является допустимым решением?

Tnx

Andrea

1 ответ

Divs with clear: both свойства делают их родительские divs расширяют их высоту, как можно было бы ожидать, когда они только плавали div внутри, как описано в http://www.quirksmode.org/css/clearing.html (помечено как "Старое решение",).

Итак, в вашем примере это то, что clear: both достигают. Вам не нужно перезагружать нормальный поток, потому что ваши основные #container (#container и #footcontainer) находятся на одном уровне иерархии div и не плавают.

Вы можете добавить эти свойства в #container чтобы он правильно расширялся:

#container {
 ...
 overflow: auto;
 width: 770px; /* Needed for some older browsers */
}

licensed under cc by-sa 3.0 with attribution.