Учебник HTML 

Урок 13. Создаем "поплавки"

Поплавки – элементы, которые могут «всплывать» вправо или влево с помощью свойства "float". Это один из немногих примеров, когда при переводе на русский язык этому свойству так и не смогли подобрать точного определения. Поэтому термин часто вызывает путаницу и непонимание в головах начинающих. Чтобы было проще понять, я определяю это свойство не «всплыванием», а заниманием элемента отведенного ему места на странице. Немного коряво звучит, зато понятнее и точнее.

Вот простой пример использования этого свойства.

HTML-код:

<---div id="image">
<---img src="logo.jpg">
<---/div>

CSS-код:

#image {
float:left;
width: 300px;
}

Смотрим

Рисунок в этом примере «всплывает» или, проще говоря, занимает место слева, а текст обтекает его с правой стороны.

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

HTML-код:

<---div id="footer">
<---div id="footer-content">
<---div class="col float-left">
<---h3>Сайты партнеров<---/h3>
<---ul>
<---li><---a href="http://romasaikin.narod2.ru">"Бесплатные советы". " - все об Интернете<---/a><---/li>
<---li><---a href="http://romasaikin.narod2.ru">"romasaikin." - агентство romasaikin<---/a><---/li>
<---li><---a href="http://romasaikin.narod2.ru"">"la la la"<---/a><---/li>
<---/ul>
<---/div>
<---div class="col float-left">
<---h3>Полезные ссылки
<---ul>
<---li><---a href="http://romasaikin.narod2.ru">la la la la la la la<---/a><---/li>
<---li><---a href="http://romasaikin.narod2.ru">la la la la la la la<---/a><---/li>
<---li><---a href="http://romasaikin.narod2.ru">la la la la la la la<---/a><---/li>
<---/ul>
<---/div>
<---div class="col2 float-right">
<---p> © Copyright 2008 ООО "romasaikin"

Дизайн: <---a href="http://romasaikin.narod2.ru">Roman Sorokin<---/a>       <---/p>
<---ul>
<---li><---a href="http://romasaikin.narod2.ru">Домой<---/a><---/li>
<---li>Карта сайта<---/li>
<---/ul>
<---/div>
<---/div>
<---/div>

CSS-код этого фрагмента:

#footer {
clear: both;
margin: 0; padding: 0;
font: normal .95em/1.5em 'Trebuchet MS', Tahoma, Arial, sans-serif;
text-align: left;  
}
#footer h3, #footer p {
margin-left: 0;
}
#footer-content {        
border-top: 1px solid #EAEAEA;
margin: 0 auto;
padding-left: 15px;
}
#footer-content a {
text-decoration: none;
color: #777;    
}
#footer-content a:hover {
text-decoration: underline;
color: #333;
}
#footer-content ul {
list-style: none;
margin: 0; padding: 0;
}
#footer-content .col {
width: 33%;
padding: 0 5px 30px 0;           
}
#footer-content .col2 {
width: 32%;
padding: 0 0 30px 0;   
}
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right {     text-align: right; }

Довольно сложный код, однако он многому может научить. Смотрим результат на сайте (три колонки в самом низу главной страницы).

Если что-то непонятно в приведенном коде, не стесняйтесь - спрашивайте, используя форму в конце урока.

См. также

• Следующий урок: Поплавки (продолжение).
• Предыдущий урок: Задаем высоту и ширину (CSS)