- •Лекция "Блочная вёрстка"
- •Блочная вёрстка
- •Границы
- •Отступы
- •Ширина блока
- •Алгоритм блочной модели
- •Вложенные слои
- •Высота блока
- •Схлопывающиеся отступы
- •Оба отступа положительны
- •Один из отступов отрицательный
- •Оба отступа отрицательны
- •Вложенные элементы
- •Отмена схлопывания
- •Поток документа
- •Использование position
- •Использование float
- •Блочные элементы
- •Преобразование в блочный элемент
- •Строчные элементы
- •Преобразование в строчный элемент
- •Строчные элементы
- •Преобразование в строчный элемент
- •Строчно-блочные элементы
- •Наложение и порядок слоёв
- •Плавающие элементы
- •Создание врезок
- •Расположение слоев по горизонтали
- •Влияние обтекания
- •Отмена обтекания
- •Ширина элемента
- •Использование overflow
- •Свойство clear
- •Псевдокласс :after
- •Позиционирование элементов
- •Нормальное позиционирование
- •Абсолютное позиционирование
- •Фиксированное положение
- •Относительное позиционирование
- •Вложенные слои
Влияние обтекания
Свойство float кроме способности по созданию плавающих элементов имеет ряд особенностей, о которых необходимо знать. Главная особенность в том, что float действует на все близлежащие элементы, заставляя их участвовать в обтекании. Рассмотрим это на примере 3.25, где показано создание стрелок на одной строке с использованием значений left и right свойства float.
Пример 3.25. Влияние обтекания
<!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">
.arrow { background: #f0f0f0; padding: 0 5px; }
.arrow A {
color: red; /* Цвет ссылок */
text-decoration: none; /* Убираем подчеркивание */
font-size: 1.5em;
}
.left { float: left; }
.right { float: right; }
</style>
</head>
<body>
<div class="arrow">
<div class="left"><a href="#">←</a></div>
<div class="right"><a href="#">→</a></div>
</div>
<p>Текст</p>
</body>
</html>
Хотя для текста и стрелок используются разные блочные элементы, которые должны располагаться на разных строках, влияние float заставляет подниматься текст выше, поскольку он попадает в зону обтекания (рис. 3.36). Также не отображается цвет фона у слоя arrow из-за того, что плавающие элементы не участвуют в потоке документа, по сути, это аналогично тому, что слой arrow оставить пустым.
Рис. 3.36. Влияние обтекания на нижележащий текст
Плавающие элементы не оказывают влияние на высоту блока, в котором они находятся. Чтобы это обнаружить, достаточно обвести блок рамкой и поместить внутрь плавающий элемент с текстом (пример 3.26).
Пример 3.26. Высота блока
XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5
<!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">
DIV {
border: 1px solid #000; padding: 10px;
}
.fig {
float: left; margin: 0 10px 5px 0;
}
</style>
</head>
<body>
<div>
<img src="images/figure.jpg" class="fig" />Винни-Пух в гостях у Кролика
</div>
</body>
</html>
Рисунок не оказывает воздействие на высоту слоя и выходит за его пределы (рис. 3.37).
Рис. 3.37. Высота слоя с плавающим элементом
Все эти особенности плавающих элементов могут оказать довольно неприятное воздействие на макет веб-страницы, особенно в случаях подобным перечисленным выше. Основной способ добиться желаемого результат это в нужный момент отменить обтекание. Для этого есть несколько способов.
Отмена обтекания
Обтекание это мощный инструмент вёрстки, применяемый для выравнивания и упорядочивания элементов. Однако чтобы держать этот инструмент под контролем, необходим противовес, без которого огромный потенциал float сужается до пары узких задач. Речь идёт об отмене обтекания с помощью разных методов. Перечислим четыре наиболее популярных.