Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Свойство float в CSS
В данном материале мы с Вами рассмотрим основные моменты, касающиеся работы с одним из наиболее важных свойств CSS - свойством float. В настоящее время практически невозможно найти шаблон сайта, при создании которого не использовалось бы данное свойство.
Однако прежде, чем переходить к этому, введем некоторые определения, которые будут особенно полезны для новичков.
Видимая область (viewport)
Видимая область - это окно или область экрана, отображающая веб-страницу. Когда видимая область меньше, чем веб-страница, то появляются полосы прокрутки.
Пример (Видимая область):
Начальный содержащий блок (the initial containing block)
Начальный содержащий блок - это полная ширина и высота веб-страницы, включая и те части, которые не попадают в Видимую область.
Пример (Начальный содержащий блок):
Содержащий блок / контейнер (Сontaining box)
Содержащий блок - это блок, который содержит другие элементы (блоки-потомки).
Пример (Несколько параграфов внутри содержащего блока):
Блочный элемент (Block level element)
Блочные элементы - это такие элементы, которые визуально представляются в виде прямоугольников. Например, параграф текста.
Пример (Блочный элемент):
Строчный элемент (Inline-level element)
Строчные элементы - это такие элементы, которые не формируют новых блоков контента; содержимое распределяется в строку. Например, выделенный курсивом текст внутри параграфа.
Пример (Строчный элемент):
Нормальный поток (Normal flow)
Нормальный поток - это способ отображения документа в том случае, когда к элементам не применяется позиционирование и свойство float. Контент будет выводиться на страницу, начиная с первого элемента в документе и заканчивая последним.
Пример (Контент в Нормальном потоке):
Вне Нормального потока (Out of normal flow)
Когда контейнер извлекается из Нормального потока, тот контент, который находится в Нормальном потоке будет полностью игнорировать его присутствие и не предоставит места для этого контейнера.
Пример (Контент Вне Нормального потока):
Статичное позиционирование (Static positioning)
Статично спозиционированным называется контейнер, который находится в Нормальном потоке.
Плавающее позиционирование (Float positioning)
Плавающий контейнер спозиционирован внутри Нормального потока, затем извлечен из него и смещен налево или направо настолько, насколько это возможно. Контент при этом может обтекать края контейнера.
Относительное позиционирование (Relative positioning)
Относительно позиционированными называются элементы, которые спозиционированы внутри Нормального потока, после чего смещены.
Элементы, которые идут после относительно спозиционированного элемента, ведут себя так, словно относительно позиционированный элемент остается в Нормальном потоке и оставляют для него место.
Пример (Относительно позиционированный контент):
Абсолютное позиционирование (Absolute positioning)
Абсолютно спозиционированный контейнер полностью извлекается из Нормального потока.
Пример (Абсолютно позиционированный контент):
Фиксированное позиционирование (Fixed positioning)
Элементы, позиционированные фиксированно, полностью извлекаются из Нормального потока относительно Видимой области. Это означает, что их местоположение не меняется при прокрутке страницы.
Теперь перейдем к рассмотрению основ свойства float.
Что такое float?
Когда вы используете для элемента свойство float, то он становится Блочным элементом. Этот элемент потом можно сдвигать влево и вправо по теукщей линии. Значения, которые может принимать свойство float: float: left, float: right и float: none.
Пример (элемент с float: left):
Пример (элемент с float: right):
Контейнер, к которому применено свойство float, располагается в соответствии с Нормальным потоком, затем извлекается из потока и смещается влево или вправо на максимально возможное расстояние. Контент может обтекать контейнер с правой стороны, если для контейнера задано float: left и с левой стороны, если для контейнера задано float: right.
Пример (элемент с float: left обтекается справа):
Пример (элемент с float: right обтекается слева):
Также можно размещать несколько плавающих блоков рядом друг с другом.
Пример (Три элемента без применения свойства float):
Пример (Три элемента c применением float: left):
Пример (Три элемента c применением float: right):
Куда сдвинется элемент, к которому применено свойство float?
Контейнер, к которому применено данное свойство, будет сдвигаться влево или вправо до тех пор, пока его внешняя граница не соприкоснется с границей содержащего блока, либо с внешней границей другого плавающего блока.
Пример (элемент с float: left и Начальный содержащий блок):
Пример (элемент с float: right и Начальный содержащий блок):
Пример (элемент с float: left и Cодержащий блок):
Пример (элемент с float: right и Cодержащий блок):
Пример (элемент с float: left и другой плавающий блок):
Если на текущей линии недостаточно места для размещения плавающего блока, то он будет смещаться вниз, линия за линией, до тех пор, пока не дойдет до места, где для него достаточно пространства.
Пример (элемент с float: left смещен вниз):
Нужно ли задавать ширину элементам со свойством float?
Да, ширину следует задавать всегда (кроме тех случаев, когда float применяется напрямую к картинке с неизвестной шириной).
Если не установить ширину, то результат будет непредсказуемым. Теоретически, плавающий элемент с незаданной шириной должен сократиться до размеров самого широкого элемента, который в нем содержится. Это может быть слово, предложение, или даже один символ - и результаты отображения могут отличаться в различных браузерах.
Пример (элемент с float: left без заданной ширины):
Элементы над и под плавающими элементами
Блочные элементы над плавающим блоком не подвергаются никаким воздействиям с его стороны. Однако, элементы под плавающим блоком будут обтекать плавающий элемент.
Пример (элемент с float: left с элементом над ним):
Пример (элемент с float: left с элементом под ним):
Границы, фоновые рисунки и фоновый цвет
В то время как контент будет обтекать плавающий элемент, границы, фоновые картинки и фоновые цвета будут располагаться под ним.
Пример (Блочный элемент с границей под элементом с float: left):
Пример (Блочный элемент с фоновым цветом под элементом с float: left):
Плавающие блоки и свойство clear
Если Вы не хотите, чтобы элемент под плавающим блоком обтекал его, Вы можете применить свойство clear к тому элементу, который следует за плавающим блоком.
Данное свойство обычно используется с четырьмя значениями: left, right, both и none. Также используется и пятое значение inherit для наследования значения родителя.
clear: left
Элемент перемещается ниже внешнего нижнего края блока с float: left
Пример (блок с float: left и применение clear: left к Блочному элементу, находящемуся под ним):
clear: right
Элемент перемещается ниже внешнего нижнего края блока с float: right
Пример (блок с float: right и применение clear: right к Блочному элементу, находящемуся под ним):
clear: both
Элемент перемещается ниже всех плавающих блоков.
Пример (блок с float: left и применение clear: both к Блочному элементу, находящемуся под ним):
clear: none
Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.
По материалам http://css.maxdesign.com.au
Перевод - Дмитрий Науменко
P.S. Изучаете CSS, чтобы освоить верстку сайтов? Посмотрите еще серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
