Оглавление

12.4. Управление обтеканием

Атрибут float определяет, по какой стороне производится выравнивание блока. Может принимать следующие значения:
□   left — блок выравнивается по левой стороне, а другие элементы обтекают его справа;
□    right — блок выравнивается по правой стороне, а другие элементы обтекают его слева;
□    попе — выравнивание отсутствует.


Атрибут clear разрешает или запрещает обтекание. Может принимать следующие значения:
□    both — запрещает обтекание по обеим сторонам;
□    left — запрещает обтекание по левой стороне;
□    right — запрещает обтекание по правой стороне;
□    попе — отменяет запрет на обтекание, который был установлен с помощью значений both, left и right.


Очень часто атрибуты float и clear применяются в блочной верстке Web-страницы для создания колонок. Рассмотрим это на примере (листинг 10).

 

Листинг 10. Блочная верстка страницы с помощью float

 

 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Блoчнaя верстка страницы с помощью float</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
* { margin: 0; padding: 0 } /* Убираем все отступы */
body { 
font-family: Verdana, Tahoma, sans-serif; 
font-size: 14px 
} 
.header { 
background-color: silver; 
padding: 10px; height: 50px;
text-align: center; 
line-height: 50px; 
} 
.menu {
float: left; 
border: 1px solid black; 
width: 150px;
padding: 5px; 
margin: 10px; 
min-height: 200px 
} 
.menu ul{ list-style-type: none }
.text { 
border: lpx solid black; 
padding: 5px;
margin: 10px 10px 10px 185px; 
min-height: 200px 
} 
.footer { 
background-color: silver; 
padding: 5px; clear: both; 
height: 30px; 
line-height: 30px; 
} 
</style> 

</head> 
<body> 
<div class="header"><h2>Заголовок</h2></div> 
<div class="menu">Панель навигации
<ul>
<li>Меню1</li>
<li>Меню2</li>
<li>Меню3</li>
<li>Меню4</li>
</ul>
</div>
<div class="text"> 
<h2>Основное содержимое страницы</h2>
 <p>Какой-то текст...</p> 
 </div>
<div class="footer">Информация об авторских npaвax</div> 
</body> 
</html>



Заголовок

Основное содержимое страницы

Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст...

Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст... Какой-то текст...

 

Итак, Web-страница состоит из четырех блоков. Первый блок (header) содержит заголовок и занимает всю ширину окна. Второй блок (menu) предназначен для вывода панели навигации. Для этого блока указано выравнивание по левой стороне и обтекание справа. В третьем блоке (text) располагается основное содержимое Web-страницы. Этот блок занимает всю ширину окна после панели навигации. Если изменить размер окна, то блок будет или расширяться, или уменьшаться. Четвертый блок (footer) предназначен для вывода информации об авторских правах, а также различных логотипов и счетчиков. Для этого блока с помощью атрибута clear отменяется обтекание с обеих сторон.
У блочной верстки Web-страницы с помощью float есть один недостаток. Если уменьшить ширину окна Web-браузера, то блоки будут выстроены по вертикали, один под другим. Чтобы избежать этого эффекта мы указали внешний отступ слева (185 рх). Благодаря этому блоки всегда будут расположены по горизонтали, независимо от ширины окна Web-браузера.

 

Следует обратить внимание еще на один момент: содержимому тега <div> нельзя задать вертикальное выравнивание с помощью атрибута vertical-align. Чтобы добиться центрирования по вертикали мы указали значение атрибута line-height равным высоте блока.

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