Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства float
Объектная модель
[window.]document.getElementById("elementID").style.styleFloat
[window.]document.getElementById("elementID").style.cssFloat
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Фиксированная ширина, использование float
Свойство float достаточно давно применяется для формирования колонок, хотя исходно оно предназначено для других целей. А именно, для создания плавающих элементов, которые обтекаются текстом с разных сторон.
Принцип создания двухколонного макета на основе этого свойства следующий. Добавляем float со значением left к слоям, формирующим колонки, а также устанавливаем у них ширину через свойство width. Все, слои будут располагаться рядом по горизонтали (пример 1).
Пример 1. Использование float
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Две колонки</title>
<style type="text/css">
#leftcol {
float: left;
background: #f0f0f0;
width: 600px;
}
#rightcol {
float: left;
background: #fc0;
width: 200px;
}
</style>
</head>
<body>
<div id="leftcol">Левая колонка</div>
<div id="rightcol">Правая колонка</div>
</body>
</html>
Несмотря на видимую простоту, нас поджидает несколько подводных камней. Во-первых, при уменьшении окна браузера на ширину, меньше суммарной ширины слоев, правая колонка «перескакивает» вниз. Во-вторых, после слоев продолжает действовать свойство float, поэтому текст будет отображаться не под колонками, как нам требуется, а рядом с ними. От этих недостатков избавит добавление слоя с именем container, внутри которых и будут располагаться остальные слои, а также использование свойства clear (пример 2).
Пример 2. Модификация кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Две колонки</title>
<style type="text/css">
#container {
width: 800px; /* Общая ширина макета */
margin: 0 auto; /* Выравниваем по центру */
}
#leftcol {
float: left;
background: #f0f0f0;
width: 600px;
}
#rightcol {
float: left;
background: #fc0;
width: 200px;
}
.clear {
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">Левая колонка</div>
<div id="rightcol">Правая колонка</div>
<div class="clear"></div>
<p>Текст</p>
</div>
</body>
</html>
Применение свойства float для создания двухколонночного макета продемонстрировано в примере 3. Модифицируя значения полей (padding) и границ (border), помните, что они влияют на ширину слоя.