Float div: CSS Layout — float and clear
float | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам (за исключением абсолютно позиционированных) |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-float |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные
элементы будут обтекать его с других сторон. Когда значение свойства float
равно none, элемент выводится на странице как обычно,
при этом допускается, что одна строка обтекающего текста может быть на той
же линии, что и сам элемент.
Синтаксис
float: left | right | none | inherit
Значения
- left
- Выравнивает элемент по левому краю, а все остальные элементы, вроде текста,
обтекают его по правой стороне. - right
- Выравнивает элемент по правому краю, а все остальные элементы обтекают его
по левой стороне. - none
- Обтекание элемента не задается.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>float</title>
<style>
.layer1 {
float: left; /* Обтекание по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin-right: 20px; /* Отступ справа */
width: 40%; /* Ширина блока */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div>
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla facilisi.
</div>
</body>
</html>Результат данного примера показан на рис. 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 CSS
Пару лет назад, когда разработчики впервые начали переходить к HTML-разметке без таблиц, CSS свойство float внезапно взяло на себя очень важную роль. Причина того, что свойство float стало так распространено, состояла в том, что по умолчанию, блочные элементы не выстраивались в линию рядом друг с другом в формате на основе столбца. Так как столбцы необходимы фактически в каждой схеме CSS, к этому свойству начали привыкать — и даже злоупотреблять им.
Свойство float в CSS, позволяет разработчику включать подобные таблице столбцы в разметку HTML без использования таблиц. Если бы не свойство float, то схемы размещения CSS не были бы возможны, кроме использования абсолютного и относительного позиционирования — которые были бы неаккуратными и сделали бы схему разметки неудобной в сопровождении.
В этой статье мы расскажем, что такое свойство float и как оно влияет на элементы в специфических контекстах. Мы также обратим внимание на некоторые из различий, которые могут возникнуть в связи с этим свойством в наиболее часто используемых браузерах. Наконец, мы продемонстрируем несколько практических применений свойства float. Это должно обеспечить также всестороннее и тщательное обсуждение этого свойства и его влияние на развитие CSS.
Определение и синтаксис CSS-свойства Float
Цель свойства float состоит в том, чтобы, вытолкнуть блочный элемент влево или вправо, взяв его из потока документа. Это позволяет естественным образом текущему информационному содержанию обвалакиваться вокруг плавающего элемента. Эта концепция является аналогичной той, которую вы видите каждый день в печатной литературе, где фотографии и другие графические элементы, выровненные по какой либо стороне, а информационное наполнение (обычно текст) течет естественно вокруг элемента выровненного вокруг левого или правого края.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
На изображении выше раздел “Читатели сайта ”.net magazine с 3-мя фотографиями читателей, которые выровнены по левому краю в своих столбцах с обертыванием текста вокруг изображений. Такова — основная идея, лежащая в основе свойства float в схемах размещения CSS, и она демонстрирует один из способов, который использован в табличном дизайне.
Эффективность использования float в многоколонной верстке была объяснена Douglas Bowman в 2004 в его классической презентации No More Tables:
Bowman объяснил принципы, лежащие в верстке без таблиц, используя старый сайт Microsoft в качестве образца. Float были заметно использованы в его ложной перестройке разметки Microsoft.
Синтаксис
Свойство Float может принимать одно из 4 значений: влево (left), вправо(right), без выравнивания (none) и наследованное (inherit). Это объявляется, как показано в коде ниже:
#sidebar {
float: left;
}
Наиболее часто используемые значения это влево и вправо. Значение none или первоначальное значение float для какого-либо элемента HTML-страницы являются значением по умолчанию. Значение inherit (наследовать), к которому может быть применено почти к каждому свойству CSS, не работает в версиях Internet Explorer, включая 7.
Свойство float не требует применения любого другого свойства для элемента с float, однако, чтобы функционировать правильно, float будет работать более эффективно при определенных обстоятельствах.
Как правило, плавающий элемент должен иметь явно установленную ширину (если это не replaced element, например изображение). Это гарантирует, что float ведет себя как ожидалось и помогает избежать проблем в некоторых браузерах.
#sidebar {
float: left;
width: 350px;
}
#sidebar { float: left; width: 350px; } |
Особенности плавающих элементов
Ниже приводится список поведение плавающих элементов, согласно спецификации CSS2:
left-floated блок будет смещен влево до его левого края (или границы края, если край отсутствует) касается или края содержания блока, или края другого floated блока
Если размер floated блока превышает доступное горизонтальное пространство, то floated блок будет сдвинут вниз
Non-positioned, non-floated блочные элементы действуют, как плавающие элементы, т.е. находится вне потока документа
Края floated блока не совпадут с краями смежных блоков
Корневой элемент(<html>) не может быть floated
Встроенный элемент, тот который floated, преобразуется в элемент блочного типа
Float на практике
Наиболее часто используемым вариантом использования свойства float является плавающее изображение с текстом, обертывающим его. Например:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
CSS, применяемая к изображению в поле выше выглядит следующим образом:
img {
float: left;
margin: 0 15px 5px 0;
border: solid 1px #bbb;
}
img { float: left; margin: 0 15px 5px 0; border: solid 1px #bbb; } |
Единственное свойство, которое может добиться такого эффекта работы это свойство float. Другие свойства (margin и border) есть там по эстетическим причинам. Другие элементы в блоке (тэги <p> с текстом в них) не нуждаются ни в каких стилях.
Как упомянуто ранее, floated элементы выбиваются из потока документа, а другие блочные элементы остаются в потоке, действуя, так если бы floated элемент там даже не находятся. Это продемонстрировано визуально ниже:
This <p> element has a different background color to show that it spans the width of its parent, ignoring the floated element. This inline text, however, wraps around the floated box.
В приведенном выше примере<p>элемент уровня блока, таким образом он игнорирует floated элемент, охватывающий ширину контейнера (за вычетом padding). Все элементы не floated, блочного типа будут вести себя аналогично.
Текст в абзаце является встроенным, поэтому он обволакивает floated элемент. Floated блоку также предоставляются параметры margin, чтобы сместить его из абзаца, делая его визуально чистым, чтобы элемент абзаца игнорировал floated блок.
Очистка floats
Проблемы расположения с floats обычно решаются использованием CSS свойства clear, которое позволяет вам “убрать” floated элементы с левой или правой или с обеих сторон.
Давайте рассмотрим пример, который часто встречается — нижний колонтитул (footer) обтекает правую сторону 2-ух клоночной разметки:
Right column also floated left
Если вы посмотрите на страницу IE6 и IE7, вы не увидите никаких проблем. Левые и правые столбцы на месте, и нижний колонтитул внизу. Но в Firefox, Опере, Safari и Chrome, вы увидеть, что нижний колонтитул (footer) съезжает со своего места. Это вызвано приминением float к столбцам. Это правильное поведение, хотя оно является более проблемным. Чтобы решить эту проблему, мы используем вышеупомянутое clear свойство, относительно нижнего колонтитула:
Результат показан ниже:
Right column also floated left
The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.
Свойство clear очистит только floated элементы. Применение clear таково: оба столбца не будут опускать нижний колонтитул, потому что он не floated элемент.
Поэтому пользуйтесь clear на не- floated элементах, и даже иногда на floated элементах, чтобы заставить элементы страницы занять свои отведенные места.
Фиксация Выпадания родителя
Один из самых общих признаков разметки с float, является “выпадение — родителя”. Это продемонстрировано в примере ниже:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Обратите внимание, что основание floated изображения появляется вне своего родителя. Родитель полностью не расширяется, для содержания floated изображение. Это вызвано тем, что мы обсуждали ранее: floated элемент вне естественного потока документа, хотя все элементы блока отображаются, но floated элемента там как бы нет. Это не ошибка CSS, всё в соответствии со спецификациями CSS. Все браузеры делают то же в этом примере. Нужно сказать, что, в этом примере, добавляя ширину контейнера можно предотвратить проблему в IE, но нужно рештиь проблему и для Firefox, Opera, Safari, или Chrome.
Решение 1:Float для контейнера
Самый простой способ решения этой проблемы является float для родительского элемента:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Теперь контейнер расширяется, чтобы уместить все дочерние элементы. Но к сожалению, это исправление будет работать только в ограниченном числе случаев, поскольку floating родитель может повлечь нежелательные последствия для вашего макета.
Решение 2: Добавление Дополнительной Разметки
Это — устаревший метод, но это простой вариант. Просто добавьте дополнительный элемент в нижнюю часть контейнера и «очистите» его. Вот как HTML-код будет выглядеть после реализации этого метода:
<div>
<img src=»//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg» alt=»» />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
<div></div>
</div>
<div> <img src=»//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg» alt=»» /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> <div></div> </div> |
И в результате CSS применяется к новым элементам:
.clearfix {
clear: both;
}
.clearfix { clear: both; } |
Вы также можете сделать это посредством <br/> тэг с действующим стилем. В любом случае, вы получите желаемый результат: родительский контейнер расширится, чтобы включить все его дочерние элементы. Но этот метод не рекомендуется, так как он добавляет несемантический код к Вашей разметке.
Решение 3: Псевдо-элемент after
:after псевдо-элемент добавляет некий элемент к выполненной странице HTML. Этот метод использовался весьма широко, чтобы решить проблемы float-clearing. Вот как выглядит CSS:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
.clearfix:after {
content: «.»;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix:after { content: «.»; display: block; height: 0; clear: both; visibility: hidden; } |
Класс CSS “clearfix” применяем к любому контейнеру, который имеет дочерние элементы с float и не расширяется, чтобы включить их.
Но этот метод не работает для Internet Explorer до7 версии, поэтому для IE нужно применить один из следующих вариантов:
.clearfix {
display: inline-block;
}
.clearfix {
zoom: 1;
}
.clearfix { display: inline-block; }
.clearfix { zoom: 1; } |
В зависимости от типа проблемы вы имеете дело с одним из двух решений, которые разрешат эту проблему в Internet Explorer. Следует отметить, что свойство zoom не является стандартом свойств Microsoft и поэтому ваш CSS станет не валидным.
Так, как псевдо — элемент :after не работает в IE6/7, получаем немного раздутый и мудрёный код, и требуется дополнительный недопустимый только для IE стиль, поэтому это решение не является лучшим способом, но вероятно, лучшее, из тех, что мы рассматривали до сих пор.
Решение 4: Свойство Overflow
Безусловно, лучший и самый простой способ решить проблему с выпадением родителя добавить overflow: hidden или overflow: auto к родительскому элементу. Это ясно, легко поддерживается, работает почти во всех браузерах и не добавляет лишней разметки.
Заметьте, что я сказал «почти» во всех браузерах. Это объясняется тем, что он не работает в IE6. Но, во многих случаях, у родительского контейнера будет установленная ширина, которая устраняет проблему в IE6. Если у родительского контейнера нет ширины, Вы можете добавить IE6-единственный стиль со следующим кодом:
// This fix is for IE6 only
.clearfix {
height: 1%;
overflow: visible;
}
// This fix is for IE6 only .clearfix { height: 1%; overflow: visible; } |
В IE6, свойство height неправильно рассматривать как min-height, таким образом, это вынуждает контейнер включить свои дочерние элементы. Свойство Overflow затем устанавливается обратно в “visible”, чтобы гарантировать, что содержимое не скрыто или пролистано.
Единственный недостаток в использовании overflow метода (в любом браузере) является возможность того, что содержание элемента будет иметь полосы прокрутки или скроет информационное наполнение. Если есть какие-нибудь элементы с отрицательными margin или с абсолютным позиционированием в родителе, то они будут скрыты, если они выходят за пределы родителя, поэтому этот метод следует использовать осторожно. Нужно также отметить что, если бы у содержащегося элемента была бы указанная height или min-height, то Вы определенно не смогли бы использовать метод overflow.
Таким образом, на самом деле не просто кроссбраузерно решить данную проблему. Но практически любая проблема очистки float может быть решена одним из вышеупомянутых методов.
Связанные float ошибки в Internet Explorer
За эти годы имели место многочисленные статьи, опубликованные в сети, обсуждающие общие ошибки, связанные с float в CSS разметке. Все они, что не удивительно, имеют дело с проблемами характерными для Internet Explorer. Ниже, Вы найдете список ссылок на ряд статей, которые обсуждают связанные с float проблемы:
Изменение cвойства float при помощи JavaScript
Чтобы изменить значение CSS в JavaScript, вы должны получить доступ к стилю объекта, преобразовывая намеченное свойство CSS в «Camel case” Например, свойство CSS “margin-left” становится marginLeft, свойство background-color становится BackgroundColor, и так далее. Но со свойством float, всё по другому, потому что слово float уже зарезервированно в JavaScript. Поэтому следующее будет неправильным:
myDiv.style.float = «left»;
myDiv.style.float = «left»; |
Вместо этого, вы должны использовать одно из следующих действий:
// For Internet Explorer
myDiv.style.styleFloat = «left»;
// For all other browsers
myDiv.style.cssFloat = «left»;
// For Internet Explorer myDiv.style.styleFloat = «left»;
// For all other browsers myDiv.style.cssFloat = «left»; |
Практическое использование Float
Floats могут быть использованы для решения целого ряда задач в CSS разметке. Некоторые примеры описаны здесь.
2-колонки, фиксированной ширины
Roger Johansson в 456 Berea Stree излагает 8 учебных шагов для создания простого кроссбраузерного, горизонтального центрирования 2-столбцов. Свойство float является составной частью расположения этой разметки.
“Разметка состоит из заголовка, горизонтальной навигационной панели, столбца основного содержания, бокового и нижнего колонтитула. Всё это также горизонтально по центру в окне браузера. Довольно типичный макет и его вовсе не трудно создать с помощью CSS после того, как вы знаете, как бороться с неизбежными ошибками Internet Explorer»
Простой макет CSS на 2 столбца
3 столбца, Схема размещения Равной высоты
Petr Stanicek с pixy.cz демонстрирует разметку из 3 столбцов кроссбраузерна, опять-таки используя float:
“Никаких таблиц, никакого абсолютного позиционирования (никакого позиционирования вообще), никакой нудной работы (!),одинаковая высота всех столбцов Левая и правая колонки фиксированной ширины (150px), средняя — тянется.»
Схема размещения на 3 столбца с CSS
Floated изображение с заголовоком.
Подобно тому, что мы обсуждали ранее в рамках «Float на практике», Max Design описывает, как float изображение с заголовком, позволяет тексту обернуться вокруг него естественно.
Плавающие Изображение и Заголовок
Горизонтальная навигация с неупорядоченными списками
Свойство float — ключевой компонент в кодировании основанных на спрайте горизонтальных навигационных панелей. Chris Spooner из Line25 описывается создание Menu of Awesomeness, в котором теги <li>, удерживающие кнопки навигации, используют float: left:
Как создать меню CSS с помощью спрайт изображения
Чтобы продемонстрировать важность свойства float в этом примере, вот, скриншот того же самого изображения после использования firebug для удаления the float: left:
Grid-Based фото галереи
Простое использование свойства float это float:left серии фотографий, содержащихся в неупорядоченном списке, которое получает тот же самый результат как, что Вы могли бы увидеть в табличной разметке.
Страница продуктов Foremost Canada’s (см. изображение выше) отображает свои продукты в формате сетки, рядом с боковой колонкой. Фотографии отображаются в виде неупорядоченного списка со свойством float, для всех <li> элементов установлено float: left. Это работает лучше, чем на табличная сетка, поскольку число фотографий в галерее может измениться, и разметка не будет затронута.
На Paragon Furniture’s futons page (см. изображение выше) другой пример страницы продуктов, где используется неупорядоченный список с floated тегами <li>.
На iStockphoto’s search results page (см. изображение выше) таже сетка, структурированных фотографий, здесь фотографии содержат float:left <div> теги, а не <li> теги.
Выравнивание <input> поля с кнопкой
Моделирование по умолчанию элементов формы для различных браузеров может быть проблематичным. Часто в одном поле формы, таком как форма поиска, необходимо поставить <input> элемент рядом с кнопкой “отправления”.
В любом браузере, результат один и тот же: кнопка немного выше, чем поле ввода. Изменение margin и padding ничего не дают. Простым решение является установить плавающее поле ввода слева и добавить маленький margin справа. Вот результат:
Заключение
Как было упомянуто в начале, без свойства float, табличное расположение будет, в худшем случае, невозможно, а, в лучшем случае неудобно в сопровождении. Float будет и впредь занимать видное место в макетах CSS, даже CSS3 начинает завоевывать известность – несмотря на то, что были дискуссии о разметке без использования floats.
Надеемся, что это обсуждение разъяснило некоторые тайны, связанные с float в CSS, и показало некоторые практические решения ряда проблем, с которыми сталкиваются разработчики CSS сегодня.
Автор: Louis Lazaris
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: http://www.smashingmagazine.com
E-mail: [email protected]
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
Подробно о свойстве float / Хабр
Правильное использование CSS свойства float может стать непростой задачей даже для опытного верстальщика. В этой статье собраны варианты применения float, а также некоторые ошибки, с наглядными примерами.
Что такое float?
Некоторые элементы в CSS являются блочными и поэтому начинаются с новой строки. Например, если расположить два абзаца с тегами P, то они будут находиться друг под другом. Другие же элементы являются «строчными», т.е. отображаются на странице в одну строку.
Один из способов переназначить элементам тип обтекания — это использование свойства float. Классический пример — использование float для выравнивания картинки по левому или правому краю. Вот простой HTML-код картинки и абзаца:
<img src="http://lorempixum.com/200/200/" />
<p>Lorem ipsum...</p>
Они отображаются с новой строки:
Добавляем немного CSS картинке:
img {
float: right;
margin: 20px;
}
Получается выравнивание по правому краю:
Если текста больше, то абзац будет обтекать картинку:
Допустим, нам нужно сделать отступ в 20 пикселей между картинкой и текстом. Вот такая конструкция работать не будет:
p {margin: 20px;}
Правильно вот так:
img {margin: 20px;}
Почему же не работает отступ для абзаца? Чтобы разобраться, добавим рамку:
p {
border: solid 1px black;
}
Результат может вас удивить:
Оказывается, картинка находится внутри абзаца! Поэтому и не работает свойство margin в первом случае. Чтобы исправить это, можно применить float:left к абзацу и указываем абсолютную ширину:
img {
float: right;
margin: 20px;
}
p {
float: left;
width: 220px;
margin: 20px;
}
Странные правила float
Перейдем к более сложным вариантам использования float: к правилам, регулирующим плавающие объекты. Это бывает необходимо при верстке галереи изображений. Например:
<ul>
<li><img src="1450823466601083332032"/></li>
<li><img src="http://placehold.it/100x150&text=2"/></li>
<li><img src="1450823466394721548724"/></li>
<li><img src="1450823466376067888878"/></li>
<li><img src="1450823466279266032276"/></li>
<li><img src="http://placehold.it/100x150&text=6"/></li>
<li><img src="http://placehold.it/100x100&text=7"/></li>
</ul>
По умолчанию каждый элемент списка появится с новой строки. Если применить к каждому float:left, изображения встанут в один ряд с переносом строки:
li {
float: left;
margin: 4px;
}
Но что, если изображения разной высоты?
Если мы добавим элементам списка отображение в одну строку, получится немного симпатичнее:
li {
display: inline;
}
А теперь выравниваем по вертикали:
img {
vertical-align: top;
}
Следует помнить, что в случае большей высоты картинок, остальные изображения обтекают только одно предыдущее, например:
Пример изменения очередности элементов — например, у нас есть список элементов по порядку:
<ul>
<li><img src="1450823466601083332032"/></li>
<li><img src="http://placehold.it/100x100&text=2"/></li>
<li><img src="1450823466394721548724"/></li>
<li><img src="1450823466376067888878"/></li>
<li><img src="1450823466279266032276"/></li>
<li><img src="http://placehold.it/100x100&text=6"/></li>
</ul>
Если мы хотим расположить их в обратном порядке, просто применяем float:right вместо float:left, и не придется менять порядок в HTML:
С помощью float удобно группировать элементы на странице, но большой проблемой становится то, что последующие элементы (текст или блок) также получают свойство обтекания. Например, у нас есть блок картинок:
Текст под ним начинает обтекать весь блок:
Чтобы избежать этого, необходимо использовать свойство clear. Если применим его ко второму изображению:
ul li:nth-child(2) {
clear: left;
}
Получим вот, что:
В этом случае остальные изображения продолжают наследовать float:left. Соответсвенно текст будет отображаться коряво:
Нужно применить clear:both к абзацу:
p {
clear: both;
}
Наша проблема решена:
Теперь предположим, что нам необходимо установить фон для галереи из предыдущих примеров. Если бы элементы были не плавающими, то получилось бы вот, что:
ul {
background: gray;
}
Но если элементам списка применить float:left, фон совсем пропадает:
Если мы сначала устанавливаем высоту для UL:
ul {
height: 300px;
}
Это тоже не решает проблему, т.к. размеры фона заданы абсолютно. Нам поможет класс clearfix, который будет применен к div на том же уровне, что и элементы UL.
.clearfix {
clear: both;
}
Существует еще одно решение, с использованием overflow:
ul {
overflow: auto;
}
Девять правил float-элементов:
- Плавающие элементы не могут выходить за край своего контейнера-родителя.
- Каждый плавающий элемент будет отображаться справа или ниже от предыдущего при float:left, либо слева и ниже, при float:right.
- Блок с float:left не может быть правее, чем блок с float:right.
- Плавающий элемент не может выходить за пределы верхней границы своего контейнера.
- Плавающий элемент не может располагаться выше, чем родительский блок или предыдущий плавающий элемент.
- Плавающий элемент не может располагаться выше, чем предыдущая строка inline-элементов
- Плавающий блок должен быть расположен как можно выше.
- Один плавающий элемент, следующий за другим, не может выходить за пределы своего контейнера — происходит перенос на следующую строку.
- Блок с float:left должен быть расположен как можно левее, а с float:right — как можно правее.
Всё о свойстве float | CSS-Tricks по-русски
Всё о свойстве float
Что такое «float»?
Float — это свойство CSS для позиционирования элементов. Для того чтобы понять его назначение и происхождение, можно обратиться к полиграфическому дизайну. В компоновке при печати, изображения могут располагаться на странице так, чтобы текст «обтекал» их. Обычно это так и называется: «обтекание текстом».
В программах для вёрстки страниц, элементы с текстом, могут учитывать изображения, а также и игнорировать их. В случае если они будут проигнорированы, текст будет отображаться над картинками, как будто их и нет. Это главная разница между тем, являются ли изображения частью основного потока страницы, или нет. Веб-дизайн очень похож.
В веб-дизайне, элементы страницы с установленным свойством float, ведут себя точно также как и изображения в полиграфии, когда текст «обтекает» их. Такие элементы являются частью основного потока веб-страницы. Однако всё обстоит иначе, если элементы используют абсолютное позиционирование. Абсолютно позиционированные элементы удаляются из основного потока страницы, подобно примеру выше, когда в полиграфии текст игнорирует изображения. Такие элементы не влияют на позицию остальных элементов, соприкасаются они или нет.
Установка свойства float происходит следующим образом:
#sidebar {
float : right;
}Всего есть 4 значения для свойства float. Left и right используются для соответствующих направлений. None (по умолчанию) — обеспечивает, что элемент не будет «плавать». И inherit, которое говорит, что поведение должно быть такое же, как и у родительского элемента.
Для чего можно использовать float?
Помимо обтекания текстом изображений, float может использоваться для создания макета всего сайта.
Свойство float также полезно и в меньших масштабах. Для примера рассмотрим маленькую область на странице сайта. Допустим вы используете float для аватара, при изменении размера изображения, размер текста будет подогнан в соответствии с изображением.
Такое же расположение объектов может быть достигнуто путём использования позиционирования. Объекту-контейнеру присваивается относительное (relative) позиционирование, а объекту с изображением — абсолютное (absolute). В этом случае аватар не повлияет на положение текста.
Отмена свойства float
Для float, родственное свойство — clear. Любой элемент, у которого установлено свойство clear, не будет поднят вверх, как от него ожидается, а отобразится ниже, после float-элементов. Возможно, пример на картинке объяснит лучше, чем слова.
В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому footer будет поднят выше, поскольку для него хватает высоты и этого требует поведение float. Чтобы исправить ситуацию, ему необходимо установить свойство clear, которое гарантирует, что элемент выведется ниже float-элементов.
#footer {
clear: both;
}Свойство clear может принимать четыре значения. Both, наиболее используемое, применяется для отмены float каждого из направлений. Left и Right — используются для отмены float одного из направлений. None — по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear. Значение inherit было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float, встречается гораздо реже, но, безусловно, имеет свои цели.
Большой коллапс
Ещё одна удивительная вещь при работе со свойством float — это то, что его использование может влиять на родительский элемент. Если такой элемент содержит только float-элементы, то он буквально схлопывается, то есть его высота равна нулю. Это не всегда заметно, если у родительского элемента не установлен какой-либо видимый фон.
Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:
Если блочный элемент, располагающийся наверху, будет автоматически увеличиваться, чтобы вместить все float-элементы, то мы получим неестественный разрыв в тексте между параграфами, без всякой возможности это исправить. Если бы было именно так, наши дизайнеры жаловались бы гораздо чаще такому поведению, чем схлопыванию.
Таким образом, схлопывание почти всегда необходимо, чтобы предотвратить трудности в вёрстке. Для того чтобы изменить такое поведение, необходимо добавить элемент отменяющий float после float-элементов, но до закрытия родительского элемента.
Способы отмены float
Если вам известно, что следом после float-элементов, всегда будет выводится какой-либо другой элемент (например футер), то вам достаточно ему установить свойство clear: both;, как в примере выше, и заниматься дальше своими делами. Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого способа не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.
И, как вы понимаете, каждый из способов используется в различных ситуациях. Возьмём, к примеру, сетку из блочных элементов, отличающихся типами.
Для более лучшего визуального представления было бы неплохо объединить подобные блоки. Например мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с overflow или «метод простой очистки», если у каждой группы есть свой элемент-контейнер. Или же мы можем использовать метод пустого div-а между каждой из групп. Три элемента-контейнера, или три пустых div-а, что лучше для вашей задачи — решать вам.
Проблемы с float
Float часто стараются обходить, поскольку работать с ними надо очень аккуратно. Большинство ошибок пришло вместе с IE6. Поскольку всё больше и больше веб-дизайнеров отказываются от поддержки IE6, то вас могут и не волновать эти проблемы. Но для тех, кому не всё равно, вот краткий список.
- «Выталкивание» (pushdown). Возникает когда элемент внутри float-элемента оказывается шире его (обычно это изображения). Большинство браузеров обработает такие элементы вне float-структуры и вёрстка не будет сломана. IE расширит элемент, чтобы изображение влезло, зачастую это ломает дизайн. На картинке представлен пример, как изображение торчит из основного контента и таким образом «выталкивает» сайд-бар вниз. Самый просто способ избежать этого — это проверить что все ваши изображения подходят по ширине. Можно использовать overflow: hidden;, чтобы обрезать выступающую часть.
- Двойной внешний отступ. Ошибка проявляющаяся в IE6, в случае если вы устанавливаете внешний отступ в том же направлении, в котором у вас указан float. В этом случае отступ удваивается. Чтобы исправить это, необходимо установить плавающему (float) элементу свойство display: inline;, не беспокойтесь, элемент по прежнему будет блочным.
- Трёх-пиксельный прыжок (3px Jog). Ошибка, которая проявляется следующим образом: текст, который расположен рядом с float-элементом неожиданно съезжает на 3 пикселя. Чтобы избежать этого, необходимо установить ширину или высоту пострадавшему тексту.
- В IE7 существует Ошибка нижнего внешнего отступа (Bottom Margin Bug) — возникает когда элемент с установленным свойством float, содержит в себе ещё один float-элемент. В таких случаях, нижний внешний отступ дочернего элемента игнорируется. Для обхода этой проблемы необходимо использовать внутренний отступ родительского элемента, вместо внешнего отступа дочернего.
Альтернативы float
Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определённо есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module), который в будущем предоставит достойную альтернативу float.
float | CSS | WebReference
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам (за исключением абсолютно позиционированных) |
| Анимируется | Нет |
Синтаксис
float: left | right | noneОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- left
- Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
- right
- Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
- none
- Обтекание элемента не задаётся.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>float</title>
<style>
.pull-left {
float: left; /* Обтекание блока по правому краю */
padding-right: 10px;
}
</style>
</head>
<body>
<div>
<img src=»image/figure.jpg» alt=»»>
</div>
<p>Бихевиоризм, как бы это ни казалось парадоксальным,
просветляет сублимированный стимул, так, например,
Ричард Бендлер для построения эффективных состояний
использовал изменение субмодальностей.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства float
Объектная модель
Объект.style.cssFloat
Примечание
В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трёхпиксельный баг») в направлении, заданном значением float.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Свойство float | CSS справочник
basicweb.ru
- HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
- CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Функции
- Правила
- Flexbox генератор
- Grid генератор
- Учебник LESS
- JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Math
- Объект Number
- Объект Object
- Объект RegExp
- Объект Promise
- Объект String
- jQuery
- Селекторы
- События
- Методы DOM
- Перемещения
- Утилиты
- Эффекты
- AJAX
- Объект Callbacks
- Объект Deferred
HTML
-
HTML учебник -
Справочник тегов -
Атрибуты событий -
Глобальные атрибуты -
Мнемоники -
Коды языков -
HTML цвета -
Тесты знаний
CSS
-
CSS учебник -
Справочник свойств -
CSS селекторы -
CSS функции -
CSS правила -
Flexbox генератор -
Grid генератор -
LESS учебник
JavaScript
-
Интерфейсы веб API -
Объект Array -
Объект Date -
Объект Function -
Объект Global -
Объект JSON -
Объект Math β -
Объект Number -
Объект Object -
Объект Promise -
Объект RegExp -
Объект String
jQuery
-
jQuery селекторы -
jQuery события -
jQuery методы DOM -
jQuery перемещения -
jQuery утилиты -
jQuery эффекты -
jQuery AJAX -
jQuery объект Callbacks -
jQuery объект Deferred
CSS свойства
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- @font-face
- font-family
- font-size
- font-style
- font-variant
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-start
- grid-row-gap
- grid-row-end
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- justify-content
- justify-items
- justify-self
- height
- @keyframes
- left
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- @media
- min-height
- min-width
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- position
- quotes
- resize
- right
- tab-size
- table-layout
- text-align
- text-align-last
float — Веб-технологии для разработчиков
Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.
Summary
CSS свойство float указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.
Плавающий элемент — это любой элемент со свойством float отличным от none.
| Начальное значение | none |
|---|---|
| Применяется к | все элементы, но не будет эффекта, если display: none |
| Наследуется | нет |
| Отображение | визуальный |
| Обработка значения | как указано |
| Animation type | discrete |
| Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Поскольку float подразумевает использование блочной модели, это свойство изменяет вычисляемые значения display в следующих случаях:
| Specified value | Computed value |
|---|---|
inline | block |
inline-block | block |
inline-table | table |
table-row | block |
table-row-group | block |
table-column | block |
table-column-group | block |
table-cell | block |
table-caption | block |
table-header-group | block |
table-footer-group | block |
flex | flex, float не оказывает влияния на такие элементы |
inline-flex | inline-flex, float не оказывает влияния на такие элементы |
| other | не меняются |
Note: If you’re referring to this property from JavaScript as a member of the element.style object, you must spell it as cssFloat. Also note that Internet Explorer versions 8 and older spelled this styleFloat. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that «float» is a reserved word in JavaScript, as with the need to escape «class» as «className» and escape ‘s «for» as «htmlFor»).
Syntax
float: left; float: right; float: none; float: inherit;
Values
left- Is a keyword indicating that the element must float on the left side of its containing block.
right- Is a keyword indicating that the element must float on the right side of its containing block.
none- Is a keyword indicating that the element must not float.
Formal syntax
left | right | none | inline-start | inline-end
Examples
Посмотреть живые примеры
<style type="text/css">
div { border: solid red; max-width: 70ex; }
h5 { float: left; margin: 0; }
</style>
<div>
<h5>HELLO!</h5>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
HELLO!
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
How floats are positioned
As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it’s containing box or another floated element.
In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second «left» red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.
Clearing floats
In the example above, the floated elements are shorter vertically than the block of text they’re floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read «Lorem ipsum dolor sit amet,» and was followed by another heading of the same style as the «Floats Example» heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we’d need to clear the floats.
The simplest way to clear the floats in this example is to add the clear property to the new heading we want to be sure is aligned left:
h3.secondHeading { clear: both; }
However, this method only works if there are no other elements within the same block formatting context that we do want the heading to continue to appear next to horizontally. If our h3 has siblings which are a sidebars floated to the left and right, using clear will force it to appear below both sidebars, which is probably not what we want.
If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats’ container. Referring to the example above again, it appears that all three red boxes are within a P element. We can set the overflow property on that P to hidden or auto to cause it to expand to contain them, but not allow them to drop out the bottom of it:
p.withRedBoxes { overflow: hidden; height: auto; }
Note: Setting overflow to scroll will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we’re setting height to auto even though that’s the default to indicate that the container should grow to accommodate its content.
Specifications
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 или ранее) | 4.0 | 7.0 | 1.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |
See also
поплавок | htmlbook.ru
| Internet Explorer | Хром | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | нет |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам (за исключением абсолютно позиционированных) |
| Ссылка на спецификацию | http: // www.w3.org/TR/CSS21/visuren.html#propdef-float |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные
элементы будут обтекать его с других сторон. Когда значение свойства float
равно нет, элемент выводится на странице как обычно,
при этом разрешается одна строка обтекающего текста может быть на той
же линии, что и сам элемент.
Синтаксис
поплавок: левый | право | нет | унаследовать
Значения
- слева
- Выравнивает элемент по левому краю, все остальные элементы, вроде текста,
обтекают его по правой стороне. - правый
- Выравнивает элемент по правому краю, все остальные элементы обтекают его
по левой стороне. - нет
- Обтекание элемента не задается.
- наследство
- Наследует значение родителя.
Пример
HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8
float
<стиль>
.layer1 {
плыть налево; / * Обтекание по правому краю * /
фон: # fd0; / * Цвет фона * /
граница: сплошной черный 1px; / * Параметры рамки * /
отступ: 10 пикселей; / * Поля вокруг текста * /
поле справа: 20 пикселей; / * Отступ справа * /
ширина: 40%; / * Ширина блока * /
}
Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autem dolor in hendrerit in vulputate velit esse molestie conquat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla facilisi.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства float
Объектная модель
[окно.] document.getElementById («elementID»). style.styleFloat
[окно.] Document.getElementById («elementID»). Style.cssFloat
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка с удвоением значений левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном величине с плавающей запятой.
Internet Explorer до версии 7.0 включительно не поддерживает значение наследования.
.
Подробно о своемстве float / Хабр
Правильное использование CSS свойств float может стать непростой даже для опытного верстальщика. В этой статье собраны варианты применения float, а также некоторые ошибки, с наглядными примерами.
Что такое float?
Некоторые элементы CSS являются блочными и поэтому начинаются с новой строки. Например, если расположить два абзаца с тегами P, то они будут находиться друг под другом. Другие же элементы являются «строчными», т.е. на странице в одной строке.
Один из способов переназначить элемент тип обтекания — это использование свойств float. Классический пример — float для выравнивания картинки по левому или правому краю. Вот простой HTML-код картинки и абзаца:
Lorem ipsum ...
Они инструмента с новой строки:
Добавляем немного CSS картинке:
img {
float: right;
маржа: 20 пикселей;
}
Получается выравнивание по правому краю:
Если текста больше, то абзац будет обтекать картинку:
Допустим, нам нужно сделать отступ в 20 пикселей между картинкой и текстом.Вот такая конструкция работать не будет:
p {margin: 20px;}
Правильно вот так:
img {margin: 20px;}
Почему же не работает отступ для абзаца? Чтобы разобраться, добавим рамку:
p {
граница: сплошная черная 1px;
}
Результат может вас удивить:
Оказывается, картинка находится внутри абзаца! Поэтому и не работает свойство margin в первом случае.Чтобы исправить это, можно применить float: left к абзацу и указываем абсолютную ширину:
img {
float: right;
маржа: 20 пикселей;
}
п {
плыть налево;
ширина: 220 пикселей;
маржа: 20 пикселей;
}
Странные float
Перейдем к более сложным вариантам использования float: к правилам, регулирующим плавающие объекты. Это бывает необходимо при верстке галереи изображений. Например:
-
-
-
-
-
-
-
По умолчанию каждый элемент списка появится с новой строки. Если применить к каждому float: left, изображения встанут в один ряд с переносом строки:
li {
плыть налево;
маржа: 4 пикселя;
}
Но что, если изображения разной высоты?
Если мы добавим элемент списка отображения в одну строку, получится немного симпатичнее:
li {
дисплей: встроенный;
}
А теперь выравниваем по вертикали:
img {
вертикальное выравнивание: сверху;
}
следует помнить, например, что в случае большей высоты картинок изображения обтекают только одно предыдущее, например:
Пример изменения очередности элементов — например, у нас есть список элементов по порядку:
-
-
-
-
-
-
. Просто применяем float: right вместо float: left, и не придется менять в HTML:
последующие элементы (текст или блок) также имеют свойство обтекания.Например, у нас есть блок картинок:
Текст под ним начинает обтекать весь блок:
Чтобы избежать этого, необходимо использовать свойство clear. Если применимо его ко второму изображению:
ul li: nth-child (2) {
ясно: слева;
}
Получим вот, что:
В этом случае остальные изображения продолжают наследовать поплавок: влево. Соответсвенно текст будет касаться коряво:
Нужно применить ясно: как к абзацу:
p {
ясно: оба;
}
Наша проблема решена:
Теперь предположим, что нам установить фон для галереи из предыдущих примеров.Если бы элементы были не плавающими, то получилось бы вот, что:
ul {
фон: серый;
}
Но если элемент списка применить float: left, фон пропадает:
Если мы сначала устанавливаем высоту для UL:
ul {
высота: 300 пикселей;
}
Это тоже не решает проблему, т.к. размеры фона заданы абсолютно. Нам поможет класс clearfix, будет применен к div на том же уровне, что и элементы UL.
.clearfix {
ясно: оба;
}
Существует еще одно решение, с использованием переполнения:
ul {
перелив: авто;
}
Девять правил float-элементов:
- Плавающие элементы не могут выходить за край своего контейнера-родителя.
- Каждый плавающий элемент будет справа или ниже от предыдущего при float: left, либо и ниже, при float: right.
- Блок с float: левый не может быть правее, чем блок с float: правый.
- Плавающий элемент не может выходить за пределы верхней границы своего контейнера.
- Плавающий элемент не может располагаться выше, чем родительский блок или предыдущий плавающий элемент.
- Плавающий элемент не может располагаться выше, чем предыдущая строка inline-elements
- Плавающий блок должен быть расположен как можно выше.
- Один плавающий элемент, следующий за другими, не может выходить за пределы своего контейнера — происходит перенос на следующую строку.
- Блок с float: left должен быть расположен как можно левее, а с float: right — как можно правее.
.
Свойство float CSS
Пару лет назад, когда разработчики начали переходить к HTML-разметке без таблиц, свойство CSS float внезапно взяло на себя очень важную роль. Причина того, что свойство float стало так распространено, состояла в том, что по умолчанию, блочные элементы не выстраивались в линию рядом с другом в формате на основе столбца. Так как столбцы существуют в каждой схеме, CSS, к этому свойству начали привыкать — и даже использовать их.
Свойство float в CSS , позволяет разработать другие таблицы столбцов в разметку HTML без использования таблиц. Если бы не свойство float , то схемы размещения CSS не были бы возможны, кроме использования абсолютного и относительного позиционирования — которые были бы неаккуратными и сделали бы схему разметки неудобной в сопровождении.
В этой статье мы расем, что такое свойство float и как оно влияет на элементы в конкретных контекстах .Мы также обратим внимание на некоторые из различных видов использования, которые используются в наиболее часто используемых браузерах. Наконец, мы реализуем несколько практических применений свойств float . Это обеспечивает всестороннее и тщательное обсуждение этого свойства и его влияние на развитие CSS.
Определение и синтаксис CSS-свойства Float
Цель свойства float состоит в том, чтобы вытолкнуть блочный элемент влево или вправо, взяв его из потока документа.Это позволяет естественным образом информационному содержанию обвалакиваться вокруг плавающего элемента. Эта концепция аналогичной той, которую вы видите, показывает каждый день в печатной литературе, где фотографии и другие графические элементы, выровненные по какой либо стороне, а также информационное наполнение (обычно текст), естественно, вокруг элемента выровненного вокруг левого или правого края.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
На изображении выше раздел «Читатели сайта».net magazine с 3-мя фотографиями читателей, которые выровнены по левому краю в своих столбцах с обертыванием текста вокруг изображений. Такова — основная идея, лежащая в основе свойств float в схемах размещения CSS, и она демонстрирует один из способов, который используется в табличном дизайне.
Эффективность использования float в многоколонной верстке была объяснена Дуглас Боуман в 2004 году в его классической презентации No More Tables:
Bowman объяснил принципы, лежащие в верстке без таблиц, используя старый сайт Microsoft в образце.Float были использованы в его ложной перестройке разметки Microsoft.
Синтаксис
Свойство Float может принимать одно из 4 значений: влево (слева), вправо (справа), без выравнивания (нет) и наследованное (наследованное). Это объявляется, как показано в коде ниже:
#sidebar {
плыть налево;
}
Наиболее часто используемое значение это влево и вправо. Значение none или первоначальное значение float для какого-либо элемента HTML-страницы значения по умолчанию.Значение inherit (наследовать), к которому может быть применено почти к каждому свойству CSS, не работает в версии Internet Explorer, включая 7.
Свойство float не требует применения другого свойства элемента с float, однако, чтобы функционировать правильно, float будет работать более эффективно при определенных обстоятельствах.
Как правило, плавающий элемент должен иметь явно установленную ширину (если это не замененный элемент, например изображение).Это гарантирует, что float ведет себя как ожидалось и помогает избежать проблем в некоторых браузерах.
#sidebar {
плыть налево;
ширина: 350 пикселей;
}
#sidebar { float: left; ширина: 350 пикселей; } |
Особенности плавающих элементов
Ниже представлен список поведения плавающих элементов, согласно спецификации CSS2:
левый блок будет смещен влево до его левого края (или границы края, если край отсутствует) касается или края содержания блока, или края другого floated блока
Если размер floated блока больше доступного горизонтального пространства, то блок будет сдвинут вниз
Непозиционированные, не плавающие блочные элементы, как плавающие элементы, т.е. находится вне потока документа
Края плавающего блока не совпадает с практикой параллельных блоков
Корневой элемент () не может быть перемещен
Встроенный элемент, который перемещается, преобразуется в элемент блочного типа
Float на
Наиболее часто использует использование свойств float — это плавающее изображение с текстом, обертывающим его. Например:
Пеллентески обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas.Vestibulum toror quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, communo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis.Praesent dapibus, neque id cursus faucibus, toror neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Нам дуи ми, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
CSS, применяемая к изображению в поле выше следующим образом:
img {
плыть налево;
маржа: 0 15px 5px 0;
граница: сплошная 1px #bbb;
}
img { float: left; поля: 0 15px 5px 0; граница: сплошная 1px #bbb; } |
Единственное свойство, которое может осуществить такой эффект работы, это свойство float.Другие свойства (margin и border) есть там по эстетическим причинам. Другие элементы в блоке (тэги
с текстом в них) не нуждаются ни в каких стилях.
Как показано ранее, плавающие элементы выбиваются из потока документа, а другие блочные элементы остаются в потоке, действуя, так если бы плавающие элементы там даже не находятся. Это визуано визуально ниже:
Этот элемент
имеет другой цвет фона, чтобы показать, что он охватывает ширину своего родителя, игнорируя плавающий элемент.Однако этот встроенный текст обтекает плавающий блок.
В приведенном выше примере
элемент уровня блока, таким образом он игнорирует перемещаемый элемент, охватывающий ширину контейнера (за вычетом заполнения). Все элементы не плавают, блочного типа будут вести себя аналогично.
Текст в абзаце является встроенным, поэтому он обволакивает плавающий элемент. Публикуемый блоку также компенсационные параметры, чтобы сместить его из абзаца, сделать его визуально чистым, чтобы элемент абзаца игнорировал плавающий блок.
Очистка плавающих элементов
Проблемы расположения с плавающими точками обычно решаются с использованием свойств CSS clear, которые позволяет вам «убрать» плавающие элементы с левой или правой или с других сторон.
Давайте рассмотрим пример, который часто встречается — нижний колонтитул (нижний колонтитул) обтекает правую сторону 2-ух клоночной разметки:
Правая колонка также перемещается влево
Если вы посмотрите на страницу IE6 и IE7, вы не увидите никаких проблем. Левые и правые столбцы на месте, и нижний колонтитул внизу.Но в Firefox, Опере, Safari и Chrome, вы увидите, что нижний колонтитул (нижний колонтитул) съезжает со своего места. Это вызвано приминением float к столбцам. Это правильное поведение, хотя оно является более проблемным. Чтобы решить эту проблему, мы используем вышеупомянутое свойство clear, относительно нижнего колонтитула:
Результат показан ниже:
Правый столбец также перемещен влево
Свойство clear очистит только плавающие элементы, поэтому применение clear: оба оба столбцы не будут вызывать выпадение нижнего колонтитула, потому что нижний колонтитул не является плавающим элементом.
Свойство clear очистит только плавающие элементы. Применение clear таково: оба столбца не будут опускать нижний колонтитул, потому что он не плавающий элемент.
Поэтому пользуйтесь очисткой на не перемещаемых элементах, и даже иногда на перемещаемых элементах, чтобы заставить элементы занять свои отведенные места.
Фиксация Выпадания родителя
Один из самых общих разметок с поплавком, «выпадение — родителя». Это показано в примере ниже:
Пеллентески обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas.Vestibulum toror quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Обратите внимание, что основание floated изображения появляется вне своего родителя. Родитель полностью не расширяется, для содержания плавающего изображения. Это вызвано тем, что мы обсуждали ранее: floated элемент вне естественного потока документа, хотя все элементы блока, но floated элемент там как бы нет. Это не ошибка CSS, всё в соответствии со спецификациями CSS.Все браузеры делают то же в этом примере. Нужно сказать, что, в этом примере, добавив возможности предотвращения проблемы в IE, нужно решить проблему и для Firefox, Opera, Safari или Chrome.
Решение 1: Float для контейнера
Самый простой способ решения этой проблемы является float для родительского элемента:
Пеллентески обитатель morbi tristique senectus et netus et malesuada славится ac turpis egestas. Vestibulum toror quam, feugiat vitae, ultricies eget, tempor sit amet, ante.Donec eu libero sit amet quam egestas semper.
Теперь контейнер расширяется, чтобы установить все дочерние элементы. Но к сожалению, это исправление будет работать только в ограниченном отношении, поскольку плавающий родитель может повлечь нежелательные последствия для вашего макета.
Решение 2: Добавление Дополнительной Разметки
Это устаревший метод, но это простой вариант. Просто добавьте дополнительный элемент в нижнюю часть контейнера и «очистите» его.Вот как HTML-код будет после реализации этого метода:
Пеллентески обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum toror quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Пеллентески обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestiatas, vestibulumugor quam vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. |
И в результате CSS на к новым элементомм:
.clearfix {
ясно: оба;
}
.clearfix { clear: оба; } |
Вы также можете сделать это посредством
тэг с действующим стилем. В любом случае, вы получите желаемый результат: родительский контейнер расширится, чтобы включить все его дочерние элементы. Этот метод не рекомендуется, так как он несемантический код к Вашей разметке.
Решение 3: Псевдо-элемент после
: после псевдо-элемент важ некий элемент к выполненной странице HTML.Этот метод использовался весьма широко, чтобы решить проблемы поплавковой очистки. Вот как выглядит CSS:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
.clearfix: after {
содержание: «.»;
дисплей: блок;
высота: 0;
ясно: оба;
видимость: скрыта;
}
.clearfix: после { content: «.»; дисплей: блок; высота: 0; ясно: оба; видимость: скрыта; } |
Класс CSS« clearfix »примением к любому контейнеру, который имеет дочерние элементы с поплавком
Этот метод не работает для Internet Explorer до7 версии, поэтому для IE нужно применить один из следующих вариантов:
.clearfix {
дисплей: встроенный блок;
}
.clearfix {
масштабирование: 1;
}
.clearfix { display: inline-block; } .clearfix { zoom: 1; } |
В зависимости от типа проблемы вы имеете дело с одним из двух решений, разрешающим эту проблему в Internet Explorer. Следует отметить, что свойство zoom не является стандартом свойств Microsoft и поэтому ваш CSS станет не валидным.
Так, как псевдо — элемент: после не работает в IE6 / 7, получаем немного раздутый и мудрый код, и требуется дополнительный недопустимый только для IE стиль, поэтому это решение не является лучшим способом, но вероятно, лучшим, из тех, что мы рассматривали до сих пор.
Решение 4: Свойство Overflow
Безусловно, лучший и самый простой способ решить проблему с выпадением родителя Добавить переполнение: скрыто или переполнение: auto к родительскому элементу.Это ясно, легко, поддерживается, работает почти во всех браузерах и не миг лишней разметки.
Заметьте, что я сказал «почти» во всех браузерах. Это объясняется тем, что он не работает в IE6. У родительского контейнера будет установленная ширина, которая устраняет проблему в IE6. Если у родительского контейнера нет ширины, Вы можете IE6-единственный стиль со следующим добавить кодом:
// Это исправление только для IE6
.clearfix {
высота: 1%;
перелив: видимый;
}
// Это исправление предназначено только для IE6 .clearfix { высота: 1%; переполнение: видимое; } |
В IE6 свойство height неправильно рассматривать как min-height, таким образом, это вынуждает контейнер включить свои дочерние элементы. Свойство Переливание обратно в «видимую», опасность, что содержимое не скрыто или пролистано.
Единственный недостаток метода переполнения (в любом браузере) является возможностью того, что содержание элемента будет иметь полосы прокрутки или скроет информационное наполнение.Если есть какие-нибудь элементы с отрицательным запасом или с абсолютным позиционированием в родителе, то они будут скрыты, если они будут скрыты за пределы родителя, поэтому этот метод следует использовать осторожно. Нужно также отметить что, если бы у встроенного элемента была указанная высота или минимальная высота, то определенно не удалось использовать метод переполнения.
Таким образом, на самом деле не просто кроссбраузерно решить проблему. Но практически любая проблема очистки поплавка может быть решена одним из вышеупомянутых методов.
Связанные с плавающей запятой в Internet Explorer
За эти годы были опубликованные в сети, обсуждающие общие ошибки, связанные с ошибками с плавающей запятой в разметке CSS. Все они, что не удивительно, имеют проблемы с характерными для Internet Explorer. Ниже приводится список ссылок на ряд статей, которые обсуждают связанные с float проблемы:
Изменение cвойства float при помощи JavaScript
Чтобы изменить значение CSS в JavaScript, вы должны получить доступ к стилю объекта, преобразовывая намеченное свойство CSS в «Camel case Например, свойство CSS «margin-left» становится marginLeft, свойство background-color становится BackgroundColor и так далее.Но со своимством float, всё по другому, потому что слово float уже зарезервированно в JavaScript. Поэтому следующее будет неправильным:
myDiv.style.float = «влево»;
myDiv.style.float = «left»; |
Вместо этого, вы должны использовать одно из следующих действий:
// Для Internet Explorer
myDiv.style.styleFloat = «влево»;
// Для всех остальных браузеров
myDiv.style.cssFloat = «влево»;
// Для Internet Explorer myDiv.style.styleFloat = «left»; // Для всех остальных браузеров myDiv.style.cssFloat = «left»; |
Практическое использование Float
Float может быть использовано для решения целого ряда задач в CSS разметке. Некоторые возможности здесь.
2-колонки, фиксированной ширины
Roger Johansson в 456 Berea Stree излагает 8 учебных шагов для создания простого кроссбраузерного, горизонтального центрирования 2-столбцов.Свойство float является составной частью расположения этой разметки.
«Разметка состоит из заголовка, горизонтальной навигационной панели, столбца основного содержания, бокового и нижнего колонтитула. Всё это также горизонтально по центру в окне. Довольно типичный макет и его вовсе не трудно создать с помощью CSS после того, как вы знаете, как бороться с неизбежными ошибками Internet Explorer
Простой макет CSS на 2 столбца
3 столбца, Схема размещения большой высоты
Петр Станичек с pixy.cz демонстрирует разметку из 3 столбцов кроссбраузерна, опять-таки используя float:
«Никаких таблиц, никакого абсолютного позиционирования (никакого позиционирования вообще), никакой нудной работы (!), одинаковая высота всех столбцов Левая и правая колонки фиксированной ширины (150px) , средняя — тянется. »
Схема размещения на 3 столбца с CSS
Плавающее изображение с заголовком.
Подобно тому, что мы обсуждали ранее в рамках «Float на практике», Max Design представил, как float изображение с заголовком, позволяет тексту обернуться вокруг него естественно.
Плавающие Изображение и Заголовок
Горизонтальная навигация с неупорядоченными списками
Свойство float — ключевой компонент в кодировании основанных на спрайте горизонтальных навигационных панелей. Chris Spooner из Line25 описывается создание Menu of Awesomeness, в котором используются теги
Как создать меню CSS с помощью спрайт изображения
Чтобы установить значение свойства float в этом примере, вот , скриншот того же самого изображения после использования firebug для удаления float: left:
Сетка фото галереи
Простое использование свойств float это float: left серии фотографий, имеется в неупорядоченном списке, которое получает тот же самый результат как, что Вы могли бы увидеть в табличной разметке.
Страница продуктов Foremost Canada’s (см. Изображение выше) отображает свои продукты в формате сетки, рядом с боковой колонкой. Фотографии представлен в виде неупорядоченного списка со своимством float, для всех
Страница футонов На Paragon Furniture (см. Изображение выше) другой пример страницы продуктов, где используется неупорядоченный список с плавающими тегами
На странице результатов поиска iStockphoto (см. Изображение выше) таже сетка, структурированных фотографий, здесь фотографии содержат float: left
Выравнивание поля с помощью кнопки
Моделирование по умолчанию элементов формы для различных браузеров может быть проблематичным. Часто в одном поле рядом формы, такой как форма поиска, необходимо поставить элемент с кнопкой «отправления».
В любом браузере, результат один и тот же: кнопка немного выше, чем поле ввода. Изменение полей и отступов ничего не дают. Простым решением является установить плавающее поле ввода слева и добавить маленькое поле справа. Вот результат:
Заключение
Как было заключено в начале, без свойств float, табличное расположение, в худшем случае, невозможно, а, в лучшем случае неудобно в сопровождении. Float будет и впредь занимать видное место в макетах CSS, даже CSS3 начинает завоевывать известность — несмотря на то, что были дискуссии о разметке без использования float.
Надеемся, это обсуждение разъясняет некоторые тайны, связанные с плавающей запятой в CSS, и показывают некоторые практические решения ряда проблем, которые сталкиваются с разработчиком CSS сегодня.
Автор: Луи Лазарис
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: http://www.smashingmagazine.com
Электронная почта: [email protected]
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD в HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть.
Всё о своемстве float | CSS-Tricks по-русски
Всё о своемстве float
Что такое «поплавок»?
Float — это свойство CSS для позиционирования элементов. Для того чтобы понять его назначение и происхождение, можно обратиться к полиграфическому дизайну. В компоновке при печати, изображения могут располагаться на странице так, чтобы текст «обтекал» их. Обычно это так и называется: «обтекание текстом».
Программы для вёрстки страниц, элементы с текстом, могут учитывать изображения, а также и игнорировать их.В случае если они будут проигнорированы, текст будет над картинками, как их и нет. Это главная разница между тем, является ли изображения основного потока страницы, или нет. Веб-дизайн очень похож.
В веб-дизайне, элементы страницы с установленным своим float, ведут себя точно также как и изображения в полиграфии, когда текст «обтекает» их. Такие элементы являются частным потоком веб-страницы. Однако всё обстоит иначе, если элементы используют абсолютное позиционирование.Абсолютно позиционированные элементы удаляются из основного потока страницы, примеры выше, когда в полиграфии текст игнорирует изображения. Такие элементы не соприкасаются позициями остальных элементов, они или нет.
Установка свойств float следующим образом:
#sidebar {
float: right;
} Всего есть 4 значения для свойств float. Левый и правый используемые для использования. Нет (по умолчанию) — обеспечивает, что элемент не будет «плавать».И наследует, которое говорит, что поведение должно быть такое же, как и должно быть у родительского элемента.
Для чего можно использовать float?
Помимо обтекания текстом изображений, float Сообщение для создания макета всего сайта.
Свойство поплавка также полезно и в меньших масштабах. Для начала рассмотрим маленькую область на странице сайта. Допустим вы используете float для аватара, при изменении размера изображения, размер текста будет подогнан в соответствии с изображением.
Получено путём использования позиционирования. Объект-контейнернеру присваивается относительное (относительное) позиционирование, а объекту с изображением — абсолютное (абсолютное). В этом случае аватар не повлияет на положение текста.
Отмена свойства float
Для float, родственное свойство — clear. Любой элемент, у которого свойство clear, не поднят, как от него будет установлено вверх, после float-elements.Возможно, пример на картинке объяснит лучше, чем слова.
В примере, сайд-бар прижат к правому краю (float: right;), а его высота меньше, чем область основного контента. Поэтому нижний колонтитул будет поднят выше, потому что для него хватает высоты и требует поведение плавающего положения. Чтобы исправить ситуацию, ему необходимо установить свойство clear, которое гарантирует, что элемент выведется ниже float-элементов.
#footer {
ясно: оба;
} Свойство clear может принимать четыре значения.Оба, наиболее используемые, используемые для эффективного использования. Левый и Правый — используются для отмены плавающего одного из направлений. Нет — по умолчанию, обычно не используется, за исключением случаев, когда необходимо отменить значение clear. Наследуется было бы пятым значением, но оно странным образом не поддерживается в Internet Explorer. Отмена только левого или правого float, встречается гораздо реже, но безусловно, имеет свои цели.
Большой коллапс
Ещё одна удивительная вещь при работе со свойством float — это то, что его использование может влиять на родительский элемент.Если такой элемент содержит только элементы float, то он буквально схлопывается, то есть его высота равна нулю. Это не всегда заметно, если у родительского элемента не установлен какой-либо видимый фон.
Такое схлопывание выглядит нелогичным, однако альтернатива ещё хуже. Рассмотрим такой пример:
Если блочный элемент, располагающийся наверху, будет автоматически увеличиваться, чтобы вместить все поплавковые элементы, чтобы мы получим неестественный разрыв в тексте между параграфами, без всякой возможности это исправить.Если бы было именно так, наши дизайнеры жаловались гораздо чаще такому поведению, чем схлопыванию.
Таким образом, схлопывание почти всегда необходимо, чтобы предотвратить затруднения вёрстке. Для того, чтобы изменить такое поведение, необходимо добавить элемент отменяющий float после float-elements, но до закрытия родительского элемента.
Способы отмены float
Если вам известно, что следом после float-elements, всегда будет выводится какой-либо другой элемент (например, футер), то вам достаточно установить свойство clear: both ;, как в примере выше и заниматься дальше своими делами.Это идеальный вариант, поскольку он не требует каких-либо хаков, или дополнительных элементов. Конечно не всё в нашей жизни так гладко и бывают случаи когда такого не достаточно. Поэтому необходимо иметь несколько дополнительных способов в своём арсенале.
И, как вы понимаете, каждый из способов используется в различных ситуациях. Возьмём, к примеру, сетку из блочных элементов, отличающихся типами.
Для более лучшего визуального представления было бы неплохо объединить подобные блоки.Например, мы хотим, чтобы каждый тип начинался с новой строки, в нашем случае тип элемента определяется цветом. Мы можем использовать метод с overflow или «метод простой очистки», если у каждой группы есть свой элемент-контейнер. Или же мы можем использовать метод пустого div-а между каждой из групп. Три элемента-контейнера, или три пустых div-а, что лучше для вашей задачи — решать вам.
Проблемы с float
Float часто стараются обходить, поскольку работать с ними надо очень аккуратно.Большинство ошибок пришло вместе с IE6. Времена больше и больше веб-дизайнеров отказываются от поддержки IE6. Но для тех, кому не всё равно, вот краткий список.
- «Выталкивание» (прижимное). Возникает когда элемент внутри float-элемента оказывается шире его (обычно это изображения). Большинство браузеров обработали такие элементы вне плавающих структур и вёрстка не будет сломана. IE расширитель, чтобы изображение влезло, зачастую это ломает дизайн.На картинке представлен пример, как изображение торчит из основного контента и таким образом «выталкивает» сайд-бар вниз. Самый просто способ избежать этого — это проверить что все ваши изображения подходят по ширине. Можно использовать overflow: hidden ;, чтобы обрезать выступающую часть.
- Двойной внешний отступ. Ошибка проявляющаяся в IE6, в случае если вы устанавливаете внешний отступ в том же направлении, в котором у вас указан float. В этом случае отступ удваивается.Чтобы исправить это, установить плавающему (float) элементу свойство display: inline ;, не беспокойтесь, элемент по-прежнему будет блочным.
- Трёхпиксельный прыжок (3px Jog). Ошибка, которая проявляется следующим образом: текст, который расположен рядом с float-неожиданно съезжает на 3 пикселя. Чтобы избежать этого, необходимо установить установну или высотуавшему тексту.
- В IE7 существует Ошибка нижнего внешнего отступа (Bottom Margin Bug) — возникает когда элемент с установленным своимством float, содержит в себе ещё один float-элемент.В таких случаях, нижний внешний отступ дочернего элемента игнорируется. Для обхода этой проблемы необходимо использовать внутренний отступ родительского элемента вместо внешнего отступа дочернего.
Альтернативы float
Если вам необходимо обтекание картинки текстом, то альтернатив нет. Но для макета страницы, определно есть выбор. Существуют очень интересные подходы, в которых комбинируется гибкость float с мощью абсолютного позиционирования. В CSS3 есть, так называемый, Модуль разметки шаблона (Template Layout Module) , который в будущем предоставит достойную альтернативу float.
.