Главная страница » Как купить
Хм… Ну, колонки, в общем, даже можно разглядеть! Не придерешься! Однако как ни крути, но выглядит все не так, как задумано, а даже можно сказать, все превратилось в некую кашу из цветов и букв.
Чтобы понять, почему так происходит, надо вспомнить описание того, как работает float. А именно, что блоки, идущие за float’ами перестают эти float’ы замечать и подтягиваются вверх. Более того, сам контейнер, в котором float’ы находятся, тоже перестает их замечать и float’нутые блоки проваливаются через низ контейнера, если он заканичвается раньше.
Теперь посмотрим на наш код:
- Оба float’нутых блока “content” и “sidebar” находятся внутри блока “main”.
- И больше ничего в “main” нет.
- А раз ему нечего больше содержать, то его высота схлопывается в нуль!
- Поэтому и не видно на картинке ни белого фона “content”, ни светло-синего фона “sidebar”, потому что эти цвета назначены в виде фона “main”.
Дальше — “footer”. Он, подчиняясь все тому же правилу, тоже не видит float’нутых блоков и подтягивается наверх прямо к самому заголовку (поскольку “main” — нулевой высоты). Но в “footer” есть текст. Текст этот уже должен обтекать float’ы: справа “content” и слева “sidebar”. Между колонками места не осталось, поэтому текст может начаться только под одной из колонок, которая первая кончится. Там он и есть. Таким образом, “footer”, подтянувшись под заголовок, продолжается вниз, пока не закончится весь его текст. И весь этот синий фон, что ниже заголовка — это “footer” и есть.
|
интерьеры
