Здравствуйте уважаемые посетители Российской школы CSS! Наша очередная статья по CSS будет посвящена одному из самых важных атрибутов для бестабличной верстки – обтеканиям, или CSS Float…
Итак, начнем наше изучение этого вопроса.
Обтекание картинки текстом использовалось с самого начала формирования стандартов верстки. Позже – в CSS появился атрибут float, призванный обеспечить такую возможность. Всё казалось бы логичным, но это – не так, в чем Вы и убедитесь в этой статье.
Сам атрибут выглядит так:
float:left – обтекание по левому краю
float:right – обтекание по правому краю
float:none – нет обтекания (по умолчанию)
С использованием обтекания связано очень много искажений и проблем. Это, в первую очередь, связано с неинуитивностью самой концепции float в CSS. Тем не менее, атрибут помогает реализовать множество различных идей, многие из которых, просто не имеют другого исполнения.
Начну с перечисления сфер использования этого замечательного атрибута.
Обтекание фиксированного объекта другими объектами
Формирование колонок, заключенных в блоки
Принудительное выравнивание объекта по левому или правому краю родителя
Выделение блока (объекта) из основного потока (содержания)
Создание частей сложных конструкций
Теперь, надо разобраться в основных особенностях работы с float:
Объект со стилем float позиционируется по левому/правому краю, вне общего потока и игнорируя другие установки
Блоки с float игнорируются основным потоком. Например: при создании фона – их содержание не учитывается
Для обтекаемых объектов необходимо задавать ширину (любым способом). Крайне желательно задавать высоту (см. предыдущий пункт)
Разные браузеры по разному понимают простейшие операции с такими блоками. Особые проблемы возникают с устаревшими версиями IE
Блоки с атрибутом Float выравниваются по верхней границы элемента - родителя
Возможны проблемы с отображением ссылок внутри Float блоков.
Основная проблема при реальной верстке с помощью обтеканий – то, что блок с таким стилем как бы сжимается, не обращая никакого внимания на содержание. Решить эту проблему можно задав высоту блока, или задав фон с помощью самой страницы (стиль для html,body).
Для предотвращения наезда нижних элементов основного потока на блок с float, используют специальный атрибут – clear. Он имеет следующие варианты:
clear:none – нет контроля обтекания
clear:left – контроль обтекания по левому краю
clear:right – контроль обтекания по правому краю
clear:both – контроль обтекания по обоим краям
Атрибут clear чаще всего используется для создания «подвала».
Закончим на этом с теорией. Посмотрим, как можно сделать дизайн с float на практике.
Не будем далеко ходить за примером и возьмём шаблон персонального сайта из предыдущего материала школы CSS.
Напомню, что там мы делали дизайн с двумя колонками. Основа дизайна там – именно float. Итак, в html для этого мы записали такой код:
<!-- Левая колонка -->
<div id="leftcolumn">
<h3>Мои друзья</h3>
<div id="rcs"><a href="http://www.css-school.ru/">Российсая школа CSS</a></div>
<div id="gzweb"><a href="http://www.gzweb.ru/">GZweb.ru</a></div>
<div id="wallday"><a href="http://www.wallpapersday.ru/">Wallpapers Day</a></div>
<hr />
<h3>Интересные события</h3>
<ul>
<li><a href="/">Российская школа CSS оживилась</a></li>
<li><a href="/">У GZweb.ru новый дизайн</a></li>
<li><a href="/gall.html">Моя галерея</a></li>
</ul>
<br /><br />
</div>
<!-- Конец левой колонки -->
<!-- Основное содержание сайта -->
<div id="rightcolumn">
<h1>Мой дневник появился</h1>
<img src="1.jpg" alt="Мой дневник появился" /><br />
Рад ссобщить Вам, что сегодня начал работать мой собственыый дневник!!!
;)
<div id="undernew">Я опубликовал этот материал <b>12 октября 2008 года</b>. Категория - <b>Новости дневника</b>.</div>
</div>
<!-- Конец основного содержания сайта -->
Без стилей, эти блоки располагались бы один под другим, но мы сейчас поправим это:
#leftcolumn {
background:#e7e7e7;
display: inline;
color: #333;
margin-right:10px;
padding:10px;
width: 246px;
height:auto;
[b] float: left;
border:2px solid #ddd;
}
#rightcolumn {
float: right;
color: #333;
padding:0;
width: 680px;
display: inline;
position: relative;
text-align:center;
}[/CSS]
Сразу видно, что для левой колонки задано выравнивание по левому краю, а для правой – по правому.
Есть ещё один способ создания двух колонок. Для этого зададим правому столбцу отступ слева на ширину левого столбца (margin-left:250px;). Скажу сразу, что IE6 понимает это своеобразно и добавляет к расстоянию между блоками несколько пикселей.
Покажу этот важный момент на примере:
Попытаемся сделать простую структуру из двух колонок, но вместо float: right; для правой ставим margin-left:***px;
Вот код для html файла:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Российская школа CSS. Использование Float.
</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="left">Левая колонка</div><div id="right">Правая колонка</div>
</body>
</html>
Вот – очень простой CSS для шаблона:
html,body {
width:1000px;
margin:0 auto;
padding-top:10px;
}
#left {
float:left;
width:250px;
background:#cbcbcb;
border:3px solid #004167;
height:300px;
padding:10px;
}
#right {
width:690px;
background:#ffd97e;
border:3px solid #004167;
height:300px;
padding:10px;
margin-left:276px;
}
В Опере и подобных браузерах это будет выглядеть так:
А в IE6 будет так:
На рисунке ясно видно, что браузер добавил три пикселя между блоками, хотя по логике, их там не должно быть. Можно, конечно предположить, что это произошло из-за влияния границы и/или внутреннего отступа. Уберём их и посмотрим, что получится:
Итак, простой манипуляцией со стилями исправить проблему не удалось. Зато, исправить её можно значительно проще. Добавим в html такой код:
<![if ! IE]>
<style>
#right {
margin-left:280px;
}
Этот код значит, что для всех браузеров, кроме IE будет приниматься отступ в 280 пикселей. Соответственно в файл стилей пишем так: margin-left:277px;
Вот и всё. Проблема – решена.
Вот, кажется и всё что следует рассказать об атрибуте Float. Желаю Вам успешного его использования. Спасибо за внимание!