Не желая слишком углубляться в техническую CSS-область Саймона и Стюарта, я подумал, что это стоит отметить.
Несмотря на все свои преимущества, иногда такие мелочи, которые CSS-макет затрудняет, действительно доставляют вам удовольствие. Очистка плавающих элементов является хорошим примером.
Проблема:
Одна из самых простых и распространенных структур компоновки включает в себя размещение небольшого DIV с заданной шириной — возможно, навигацию, цитату или биографию — внутри большего DIV с оберткой, который содержит оставшееся содержимое. В разметке это может быть что-то вроде:
<div id="outer"> <div id="inner"> <h2>A Column</h2> </div> <h1>Main Content</h1> <p>Lorem ipsum</p> </div> Мы можем установить ширину «#inner» (скажем, «width: 20%»), но, будучи элементом уровня блока, основное содержимое всегда будет перенесено ниже, если мы не поместим его (слева или справа). Здесь начинается наша классическая проблема.
Если «#inner» короче, чем #outer, все хорошо.
Однако, если «#inner» становится выше, чем родительский элемент, он пробивает нижний край «#outer». Как будто «#outer» забывает, что должен следить за тем, что делает «#inner», как только вы его разместите.
Поскольку мы не всегда можем контролировать количество контента в этих DIV, это, безусловно, представляет проблему. Вот типичный пример проблемы в действии . (Спасибо Pixy за аккуратный маленький контент-скрипт).
Решения:
a) Метод разметки: первый и рекомендуемый W3C подход немного уродлив — дополнительная разметка. В самом конце своего контента <br style="clear:both"/> очищенный элемент — обычно что-то вроде <br style="clear:both"/> . Это HTML-эквивалент вставки спичек в рамку окна, чтобы закрыть открытое окно. Это работает, но «загрязняет вашу страницу» вещами, которые существуют только для правильной визуализации.
б) Метод Аслетта / ПИРОГА: Менее 12 месяцев назад Тони Аслетт, работавший с PositionIsEverything.com, изобрел новый метод, настолько дьявольски умный, что они должны были сидеть в вулкане на искусственном острове, гладить большого белого кота и злобно смеяться когда они думали об этом.
Вам нужно прочитать учебник, чтобы получить полную историю, но, короче говоря, они используют малоизвестный, редко используемый псевдокласс (: after), чтобы разместить скрытый, очищенный полный стоп после контента. В сочетании с разбрызгиванием хаков это работает прекрасно — но у меня болит голова над левым глазом, когда я думаю об этом.
c) Метод упорядоченного списка: в октябре прошлого года Стив Смит из Orderlist.com опубликовал несколько более простой метод . Опять же, прочитайте его учебник, чтобы получить представление о низком уровне, но вкратце его метод включает в себя «плавание почти всего» (FnE), которое, естественно, включает в себя внешний DIV. Это может оказать значительное влияние на то, как ваш дизайн складывается, и, как говорит Стив, «это требует немного больше настроек», но в целом этот метод мне кажется немного более надежным.
d) Это было мое «текущее состояние игры» до прошлой недели, когда собственный CSS-гуру SitePoint Forum Пол О’Брайен небрежно указывал, что добавление «overflow: auto» во внешний DIV делает свое дело.
«Мусор», — подумал я про себя.
Спустя полчаса тестирования я был поражен, обнаружив, что Пол был на 100% прав — как показывает этот пример . Кажется, что напоминание внешнему DIV о том, что его переполнение установлено на «auto», заставляет его думать «о да … я оборачиваюсь, не так ли?».
Этот факт настолько скучно прост, что трудно понять, хорошо ли знают об этом тысячи разработчиков, но никогда не думали упомянуть об этом. Я знаю, что показал пример страницы четырем разбирающимся в CSS коллегам из SitePoint, и все покачали головой, медленно моргнули и сказали: «Что…?» (Или что-то подобное).
Судя по моему тестированию, похоже, что он работает одинаково практически во всех браузерах. Кажется, даже IE4 это нравится — только NS4 сходит с ума, и я не совсем уверен, что несколько хаков не смогли заставить это работать.
У нас еще не было времени тщательно протестировать этот метод в условиях строгого соответствия, но пока, похоже, никаких серьезных недостатков нет.
Определенные комбинации полей и отступов могут вызывать использование внутренних полос прокрутки. Если вы не можете «массажировать» их, мы обнаружили, что «переполнение: скрытый» имеет практически тот же эффект без полос прокрутки. Единственный недостаток «скрытого» — обрезка некоторых изображений, если они размещены ниже на странице.
Обе проблемы кажутся очень управляемыми.
Хорошая работа, Пол.