Оглавление

Как избежать смещения следующего элемента вверх при использовании свойства float

После присвоения изображению или иному элементу свойства float остальные блочные элементы будут вести себя, как будто его не существует, при этом содержащиеся в них текст и строчные изображения будут этот плавающий элемент обтекать. Как заставить элементы страницы отобразиться ниже такого плавающего блока?

 

Решение
Использование свойства clear позволяет отобразить заданный элемент под любыми элементами, для которых задано свойство float, как если бы они оставались частью потока элементов. К примеру, зададим это свойство со значением both для первого абзаца, следующего за списком :

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
 <head>
   <title>float and clear</title>
   <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
   <style type="text/css">
     .xoopsimg {
       float: right;
       width: 155px;
       margin-left: 20px;
       margin-bottom: 6px;
     }
     .clear {
       clear: both;
     }
   </style>
 </head>
 <body>
   <h1>Что такое XOOPS?</h1>
   <img src="img/xoops-cover.jpg" alt="xoops" class="xoopsimg" />
   <h3>Технические требования:</h3>
   <ul>
     <li> WWW сервер (<a href="http://www.apache.org/">Apache</a>, IIS, Roxen)</li>
     <li> <a href="http://www.php.net/">PHP</a> 5.2 или выше</li>
     <li> <a href="http://www.mysql.com/">База данных MySQL</a> 5.0 (или выше)</li>
   </ul>
   <p class="clear">XOOPS  - это динамический OO  (Объектно-Ориентированный)
     основанный на открытом исходном коде скрипт  портала, написанный на PHP.
     XOOPS поддерживает различные базы данных,  XOOPS - это идеальный инструмент
     для создания небольших  высоко-динамичных сообществ вэб-сайтов, внутренних
     порталов компании,  корпоративных порталов, web-публикаторов и многого другого.
   </p>
   <p style="text-align: right;"><a href="#">скачать XOOPS</a></p>
 </body>
</html>


Как видно на рис. 9.7, на котором мы сдвинули плавающий элемент вправо, при такой разметке абзац сдвигается вниз и располагается под плавающим изображением.

 

Первый абзац отображается под изображением

Рис. 9.7. Первый абзац отображается под изображением

 

Обсуждение
Свойство float удаляет элемент из потока, и последующие блочные элементы просто-напросто игнорируют его. Для более наглядной демонстрации этого механизма можно добавить элементам документа рамки, в нашем случае – элементам ul и p, как показано на рис. 9.8.

 

.xoopsimg {
   float: right;
   width: 155px;
   margin-left: 20px;
   margin-bottom: 6px;
   border: 2px solid #000000;
}
ul, p {
   border: 2px solid #000;
} 

 

 Добавление рамки шириной в два пиксела к элементам «ul» и «p»

Рис. 9.8. Добавление рамки шириной в два пиксела к элементам «ul» и «p»

 

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

 

Для размещения абзаца под нижней границей изображения можно воспользоваться свойством clear:

.clear {
   clear: both;
}


Этот CSS-класс нужно присвоить первому тегу <p>, следующему за списком ингредиентов:

 <p class="clear">XOOPS  - это динамический OO  (Объектно-Ориентированный)
   основанный на открытом исходном коде скрипт  портала, написанный на PHP
   XOOPS поддерживает различные базы данных,  XOOPS - это идеальный инструмент
   для создания небольших  высоко-динамичных сообществ вэб-сайтов, внутренних
   порталов компании,  корпоративных порталов, web-публикаторов и многого другого.
</p>


Оставим добавленные ранее рамки и обновим документ. Его нынешний вид показан на рис. 9.9; как видите, указанный абзац начинается под изображением, что особенно наглядно демонстрирует его рамка.

 

Размещение абзаца под изображением с помощью свойства clear

Рис. 9.9. Размещение абзаца под изображением с помощью свойства clear

 
Свойство clear также может принимать значения left и right, что может пригодиться в случае, если вы хотите, чтобы элемент игнорировал свойство float со значениями влево или вправо соответственно. Однако чаще всего вам потребуется значение both. Имейте в виду, что использование свойств float и clear может привести к ошибкам интерпретации, особенно в Internet Explorer – достаточно вспомнить «исчезающий контент» в Internet Explorer 6, о котором мы говорили в главе 7.

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити