 |
Пример 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 сужается до пары узких задач. Речь идёт об отмене обтекания с помощью разных методов. Перечислим четыре наиболее популярных.
Ширина элемента
Если плавающий элемент будет занимать всю доступную ширину, то остальные элементы, следующие за ним, будут начинаться с новой строки. Для этого надо включить свойство width со значением 100%. Так, стиль в примере 3.25 можно дополнить следующим образом:
.left { float: left; width: 50%; }.right { float: right; width: 50%; text-align: right; }Каждый слой со стрелкой теперь занимает ширину 50% и в сумме они дают 100% ширины, поэтому абзац, идущий после слоя arrow, начнётся с новой строки.
Этот метод применяется редко, поскольку ширину нельзя применить к изображениям, к тому же он не решает проблему с высотой слоя и его фоном.
Использование overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Значение auto в частности, добавляет полосы прокрутки при необходимости, а hidden отображает только область внутри элемента, остальное скрывает. Кроме этого, использование overflow со значением auto, scroll или hidden отменяет действие float. Стиль для примера 3.25 дополняется всего одной строкой:
.arrow { overflow: hidden; }Результат после применения свойства overflow сразу меняется (рис. 3.38).
|
|
|
Рис. 3.38. Влияние свойства overflow на фон
Аналогично дополняется пример 3.26:
DIV { overflow: hidden; }Результат показан на рис. 3.39.
Рис. 3.39. Влияние свойства overflow на границу
overflow одно из самых популярных свойств работающее в связке float. Но иногда возникают ситуации, когда применение этого метода недопустимо. Это происходит в тех случаях, когда элемент выходит за пределы элемента, при этом он будет «обрезан». В примере 3.27 картинка сдвигается влево от своего исходного положения.
|
|
|
