Float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем "поплавок". А элемент с таким свойством называют "всплывающим". Элемент может "всплывать" вправо или влево с помощью свойства. Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.
Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера.
Значения свойства float:
left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа.
right - Выравнивает элемент по правому краю, остальные элементы обтекают его слева.
none - Выравнивание элемента не задается. (по умолчанию)
Если мы, например, хотим, чтобы текст окружал рисунок, то результат должен быть таким:
HTML-код для этого примера:
<div id="picture">
<img src="/2css.png" alt="CSS" width="90px">
</div>
<p>CSS (Cascading Style Sheets) Каскадные стили таблиц – это язык стилей позволяющий определять отображения HTML документа. Так как HTML используется для создания структуры документа, то CSS используется для форматирования содержимого структуры HTML. Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML.
</p>
Чтобы рисунок всплывал влево, а текст окружал его, вы должны определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left:
Пример CSS:
#picture {float:left; width: 100px;}
Пример в три колонки:
Поплавки/Floats можно использовать для вывода колонок в документе. Для этого вы должны просто определить необходимые колонки в HTML-коде тэгами <div> таким образом:
HTML-код для этого примера:
<div id="column1">
<p>CSS (Cascading Style Sheets) Каскадные стили таблиц – это язык стилей...</p>
</div>
<div id="column2">
<p>Так как HTML используется для создания структуры документа, то CSS используется...</p>
</div>
<div id="column3">
<p>Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML...</p>
</div>
Теперь необходимую ширину колонок установим, например, 33%, а затем установим всплывание каждой влево в свойстве float:
Пример CSS:
#column1 { background-color: #ccc; float:left; width: 33%; }
#column2 { background-color: #c2e254; float:left; width: 33%; }
#column3 { background-color: #ffeb9f; float:left; width: 33%; }
Свойство clear
Свойство clear управляет поведением последовательностью всплывающих элементов документа.
По умолчанию последовательные элементы смещаются вверх, заполняя доступное пространство, которое освобождается, если бокс всплывает в сторону. Посмотрите на предыдущий пример, где текст автоматически смещается вверх вдоль изображения Била Гейтса.
Свойство clear может иметь значения left, right, both или none. Принцип таков, что если clear, например, имеет для бокса значение both, то верхний край рамки этого бокса всегда будет находиться под нижним краем поля возможных всплывающих сверху боксов.
<div id="picture">
<img src="/2css.png" alt="CSS" width="90px">
</div>
<h1>CSS</h1>
<p class="floatstop"> CSS (Cascading Style Sheets) Каскадные стили таблиц – это язык стилей...</p>
Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:
#picture {float:left; width: 100px;}
.floatstop {clear:both;}
Блочная вёрстка.
Блочная верстка заменяет таблицы HTML.
Разберём классический макет верстки сайта из трёх колонок, а так же "шапки" и "подвала". В котором правая и левая колонки имеют фиксированную ширину, а центральная колонка "резиновая" т.е. занимает собой всё оставшееся место.
HTML-код для этого примера:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="logo">Логотип</div>
<div id="menu">Меню</div>
<div id="reklam">Реклама</div>
<div id="content">Основное содержание<br><br><br><br><br> И ещё куча текста..</div>
<div id="foter">Подвал</div>
</body>
</html>
Пример CSS:
body { color: black; background-color: white; }
#logo { background-color: #9da6a2; padding: 5px; }
#menu { background-color: #247eca; width: 100px; height: 250px; float: left; padding: 5px; }
#reklam { background-color: #247eca; width: 100px; height: 250px; float: right; padding: 5px; }
#content { background-color: #4e8f0c; height: 250px; padding: 5px 15px; }
#foter { background-color: #ff9e5c; clear: both; padding: 5px; }
Задания
Создайте документ как показано на рисунке ниже.
Создайте собственную блочную верстку с параметрами колонок как показано на рисунке ниже
Ширина самого сайта = 900 px. Основное содержание ширина заполняет все пространство по центру. Черный цвет по бокам - атрибут BODY. Розовый цвет, параметр div id="web" к которому задается ширина самого сайта 900px.