Как очистить поплавки для надлежащего размещения колонтитул

Большинство начинающих пользователей CSS, даже никогда не слышали о "Очистить" собственности. Я знаю, в прошлом, я не был, и racked моем мозгу в течение нескольких часов пытались получить свой формат для отображения правильно с плавающей панели. Вот как это работает:

При оказании divs, браузеры нормальный поток поставить один, то после этого в нормальном потоке вещей, место следующей. Если вы хотите иметь divs бок о бок, то обычно решение заключается в том, чтобы добавить "плавающей" собственности на них. В случае ниже, как "лево-нав" Div и "содержание" Div имеют свойство "плавать: слева". Затем мы можем положить содержимое внутрь плавал divs, и счастливы макет. Проблема заключается в том, ничто не в нормальном потоке вещей продолжать формат, поэтому мы должны сказать браузера настаивать вещи вниз. Примечание этих двух примеров:

Неправильно:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ DIV> 
     <div id="content"> 
         .... 
     </ DIV> 
  </ DIV> 
  <div ID = "footer"> <p> Все это текст скрыт под плавал divs!! </ DIV> 

Правильно:

  <div id="wrapper"> 
     <div id="left-nav"> 
         .... 
     </ DIV> 
     <div id="content"> 
         .... 
     </ DIV> 

  <div style="clear: both;"> <! - Открытый плывет --></ DIV> 

  </ DIV> 
  <div ID = "footer"> <p> Моя колонтитул теперь отображается ниже элементы плавал!! </ DIV> 

Это одна мало соответствие рассказывает браузера "Сохранить собираюсь", и движется поток вниз. Самый простой способ проверить это дать "обертки" цвет фона, и посмотрите на разницу в этих двух частей кода, когда есть содержание в каждом элементе.

High Tech Web 2.0 интерактивные примеры:

Пример 1 (Неверная):

  +--(# обертки )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  +---| |----| |---+ 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | # Левой NAV | | # содержанию | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      | | | | 
      +-----------+ +--------------------+ 

Пример 2 (правильный):

  +--(# обертки )---------------------------------+ 
  | +-----------+ +--------------------+ | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | # Левой NAV | | # содержанию | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | | | | | | 
  | +-----------+ +--------------------+ | 
  | | 
  | + --- Ясно: обе ----------------------- + | 
  | | 
 +---------------------------------------------+ 

Он споткнется!

Пост Инфо

Эта запись была размещена на понедельник, 31 декабря 2007 и подается в соответствии с CSS, дизайн. Она имеет 198 просмотров

Метки: CSS, хаки, советы

Комментарии канал. | Оставить комментарий | Оставить Trackback.

Предыдущая должность: добавить код Google Analytics на Ваш веб-сайт всего в Flash »
Следующий пост: AJAX Контактная форма »

Самые популярные должностей