Что такое float. Всё о свойстве float
Пару лет назад, когда разработчики впервые начали переходить к HTML-разметке без таблиц, CSS свойство float внезапно взяло на себя очень важную роль. Причина того, что свойство float стало так распространено, состояла в том, что по умолчанию, блочные элементы не выстраивались в линию рядом друг с другом в формате на основе столбца. Так как столбцы необходимы фактически в каждой схеме CSS, к этому свойству начали привыкать - и даже злоупотреблять им.
Свойство float в CSS , позволяет разработчику включать подобные таблице столбцы в разметку HTML без использования таблиц. Если бы не свойство float , то схемы размещения CSS не были бы возможны, кроме использования абсолютного и относительного позиционирования - которые были бы неаккуратными и сделали бы схему разметки неудобной в сопровождении.
В этой статье мы расскажем, что такое свойство float и как оно влияет на элементы в специфических контекстах . Мы также обратим внимание на некоторые из различий, которые могут возникнуть в связи с этим свойством в наиболее часто используемых браузерах. Наконец, мы продемонстрируем несколько практических применений свойства float . Это должно обеспечить также всестороннее и тщательное обсуждение этого свойства и его влияние на развитие CSS.
Определение и синтаксис CSS-свойства Float
Цель свойства float состоит в том, чтобы, вытолкнуть блочный элемент влево или вправо, взяв его из потока документа. Это позволяет естественным образом текущему информационному содержанию обвалакиваться вокруг плавающего элемента. Эта концепция является аналогичной той, которую вы видите каждый день в печатной литературе, где фотографии и другие графические элементы, выровненные по какой либо стороне, а информационное наполнение (обычно текст) течет естественно вокруг элемента выровненного вокруг левого или правого края.
На изображении выше раздел “Читатели сайта ”.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; }
#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 блока не совпадут с краями смежных блоков
Корневой элемент() не может быть floated
Встроенный элемент, тот который floated, преобразуется в элемент блочного типа
Float на практике
Наиболее часто используемым вариантом использования свойства float является плавающее изображение с текстом, обертывающим его. Например:
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) есть там по эстетическим причинам. Другие элементы в блоке (тэги
С текстом в них) не нуждаются ни в каких стилях.
Как упомянуто ранее, floated элементы выбиваются из потока документа, а другие блочные элементы остаются в потоке, действуя, так если бы floated элемент там даже не находятся. Это продемонстрировано визуально ниже:
This box is floated left
This
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.
В приведенном выше примере
элемент уровня блока, таким образом он игнорирует floated элемент, охватывающий ширину контейнера (за вычетом padding). Все элементы не floated, блочного типа будут вести себя аналогично.
Текст в абзаце является встроенным, поэтому он обволакивает floated элемент. Floated блоку также предоставляются параметры margin, чтобы сместить его из абзаца, делая его визуально чистым, чтобы элемент абзаца игнорировал floated блок.
Очистка floats
Проблемы расположения с floats обычно решаются использованием CSS свойства clear, которое позволяет вам “убрать” floated элементы с левой или правой или с обеих сторон.
Давайте рассмотрим пример, который часто встречается — нижний колонтитул (footer) обтекает правую сторону 2-ух клоночной разметки:
Left column floated left
Если вы посмотрите на страницу IE6 и IE7, вы не увидите никаких проблем. Левые и правые столбцы на месте, и нижний колонтитул внизу. Но в Firefox, Опере, Safari и Chrome, вы увидеть, что нижний колонтитул (footer) съезжает со своего места. Это вызвано приминением float к столбцам. Это правильное поведение, хотя оно является более проблемным. Чтобы решить эту проблему, мы используем вышеупомянутое clear свойство, относительно нижнего колонтитула:
#footer { clear: both; }
#footer { clear : both ; |
Результат показан ниже:
Left column floated left
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-код будет выглядеть после реализации этого метода:
XHTML
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.
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. |
И в результате CSS применяется к новым элементам:
Clearfix { clear: both; }
Clearfix { clear : both ; |
Вы также можете сделать это посредством
тэг с действующим стилем. В любом случае, вы получите желаемый результат: родительский контейнер расширится, чтобы включить все его дочерние элементы. Но этот метод не рекомендуется, так как он добавляет несемантический код к Вашей разметке.
Решение 3: Псевдо-элемент after
:after псевдо-элемент добавляет некий элемент к выполненной странице HTML. Этот метод использовался весьма широко, чтобы решить проблемы float-clearing. Вот как выглядит CSS:
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. Поэтому следующее будет неправильным:
Style . styleFloat = "left" ;
// For all other browsers
myDiv . style . cssFloat = "left" ;
Практическое использование Float
Floats могут быть использованы для решения целого ряда задач в CSS разметке. Некоторые примеры описаны здесь.
2-колонки, фиксированной ширины
3 столбца, Схема размещения Равной высоты
Floated изображение с заголовоком.
Подобно тому, что мы обсуждали ранее в рамках «Float на практике», Max Design описывает, как float изображение с заголовком, позволяет тексту обернуться вокруг него естественно.
Горизонтальная навигация с неупорядоченными списками
Свойство float — ключевой компонент в кодировании основанных на спрайте горизонтальных навигационных панелей. Chris Spooner из Line25 описывается создание Menu of Awesomeness , в котором теги
Чтобы продемонстрировать важность свойства float в этом примере, вот, скриншот того же самого изображения после использования firebug для удаления the float: left:
Grid-Based фото галереи
Простое использование свойства float это float:left серии фотографий, содержащихся в неупорядоченном списке, которое получает тот же самый результат как, что Вы могли бы увидеть в табличной разметке.
Страница продуктов Foremost Canada’s (см. изображение выше) отображает свои продукты в формате сетки, рядом с боковой колонкой. Фотографии отображаются в виде неупорядоченного списка со свойством float, для всех
На Paragon Furniture’s futons page (см. изображение выше) другой пример страницы продуктов, где используется неупорядоченный список с floated тегами
На iStockphoto’s search results page (см. изображение выше) таже сетка, структурированных фотографий, здесь фотографии содержат float:left
Выравнивание поля с кнопкой
Моделирование по умолчанию элементов формы для различных браузеров может быть проблематичным. Часто в одном поле формы, таком как форма поиска, необходимо поставить элемент рядом с кнопкой “отправления”.
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none , элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
float: left | right | none | inherit
Значения
left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none Обтекание элемента не задается. inherit Наследует значение родителя.HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства float
Объектная модель
document.getElementById("elementID ").style.styleFloat
document.getElementById("elementID ").style.cssFloat
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Форматирование каскадных таблиц). Этот язык существует с 1996 года и до сих пор продолжает развиваться. На данный момент разработчики используют уже третью версию CSS. С помощью языка программирования CSS возможно создать вполне красивый и приятный сайт, который не будет казаться устаревшим или неудобным для пользователя, даже если совершенно не применять JavaScript. Современные возможности третьей версии позволяют это сделать.
Также разработчики могут использовать более удобные варианты форматирования, такие как Flexbox или Position для смены места элемента на сайте, но обо всем по порядку. Для начала следует разобраться с преимуществами и недостатками свойства Float.
CSS Float - зачем он нужен?
Float - свойство для позиционирования элементов. Каждый день его можно наблюдать на страницах газет и журналов, смотря на картинки и текст, который очень аккуратно обтекает их вокруг. В мире кодов HTML и CSS при использовании функции Float должно произойти то же самое. Но стоит помнить, что редактирование изображений далеко не всегда является основным назначением этой функции. Ее можно использовать для создания популярного расположения элементов сайта в две, три, четыре колонки. На самом деле, свойство Float CSS применяется практически к любому html-элементу. Зная основы редактирования расположения элементов с помощью функции Float, а затем и Property, создать любой дизайн сайта не составит особого труда.
Специальные программы верстальщиков могут иногда не замечать изображений, а идти поверх них. Достаточно похожие вещи происходят и в веб-дизайне, только с тем учетом, что текст, вместо того чтобы залазить на картинку, отображается (при неправильном применении свойства Float) рядом с ней или под ней, но всегда не там, где нужно разработчику.
CSS Float описание свойства
В действительности умение пользоваться свойством Float является очень хорошим тузом в рукаве для любого веб-дизайнера. Но, к сожалению, недостаточное понимание того, как работает эта функция, может привести к столкновениям элементов сайта и другим огорчениям подобного рода. Раньше также подобные ситуации происходили из-за багов в браузерах. Сейчас секрет того, как правильно использовать свойство Float, будет раскрыт, и никаких проблем с этим возникнуть больше не должно.
У свойства Float есть четыре значения:
- Float:inherit;
- Float:right;
- Float:left;
- Float:none;
Для тех, кто знает английский, значения параметров свойства Float должны быть понятны. Но для тех, кто не знает, можно привести небольшое объяснение. Параметр :left; перемещает тело элемента в самый крайний левый угол родительского элемента. То же происходит (только в другую сторону) при bcgjkmpjdfybb параметра :right; . Значение :inherit; приказывает элементу взять на себя те же настройки, что и у родительского. Такие элементы еще называются дочерними, так как они располагаются непосредственно внутри родительского в html-коде. А свойство :none; позволяет элементу не нарушать обычного течения документа, оно устанавливается по умолчанию для всех частей кода.
Как Float работает?
Свойство Float CSS работает достаточно просто. Все, что было описано выше, можно сделать без особого труда. Дальше все будет так же просто. Но прежде чем продолжить изучение свойства Float, стоит немного разобраться в теории. Каждый элемент веб-сайта является блоком. Легко убедиться в этом, открыв консоль в Google Chrome нажатием Ctrl + Shift + J. Текст, заголовок, картинка, ссылки и все остальные составные части сайта будут отображаться блоками, просто разных размеров. Изначально все эти блоки идут друг за другом. Как видно на примере ниже, строки кода идут друг за другом, поэтому и отображаться они будут строго друг за другом.
Это называется normal flow (нормальное течение). При таком течении все блоки ложатся друг на друга (не пересекая тела элементов) вертикально. Изначально все содержимое веб-страницы расположено именно таким образом. Но при использовании, например, свойства языка CSS Float Left, элемент покидает свое естественное положение на странице и смещается в крайнее левое положение. Такое поведение неизбежно приводит к столкновению с теми элементами, которые так и остались в нормальном течении.
Другими словами, элементы вместо того, чтобы располагаться вертикально, теперь находятся рядом друг с другом. Если у родительского элемента достаточно места, чтобы он смог разместить два дочерних внутри себя, то столкновения не происходит, если же нет, то наложение одного объекта на другой неизбежно. Это чрезвычайно важно запомнить для понимания работы свойства Float CSS.
Функция Clear для решения проблем
У функции Float есть сердечный друг - Clear. Вместе они - Обе эти функции дополняют друг друга и делают разработчика счастливым. Как было указано выше, соседние элементы выходят из своего нормального течения и тоже начинают "плавать", как и элемент, к которому применили свойство Float (например, CSS Float Top). В итоге вместо одного плавающего элемента получаются два, причем совсем не в том месте, где их намеревался расположить разработчик. С этого момента как раз и начинаются все проблемы.
У функции Clear есть пять значений:
- :left;
- :right;
- :both;
- :inherit;
- none;
По аналогии можно понять, когда лучше всего применить функцию Clear. Если у нас написана строчка в коде Float:right; (CSS-код имеется ввиду), то функция должна быть Clear:right ;. То же самое качается и свойства Float:left; дополнять его будет Clear:left; . При написании кода Clear:both; получится, что элемент, к которому применяется эта функция, будет находиться ниже элементов, к которым применена функция Float. Inherit берет настройки у родительского элемента, а none не вносит никаких изменений в структуру сайта. Если понять, как работают функции Float и Clear, можно написать уникальный и необычный HTML и CSS Float-код, который сделает ваш веб-сайт единственным в своем роде.
Использование Float для создания колонок
Особенно полезно свойство Float при создании колонок на сайте (или расположении контента CSS Float по центру веб-страницы). Именно такой код является самым практичным и удобным, поэтому стоит рассмотреть несколько вариантов создания привычного шаблона сайта, состоящего из двух колонок. Для примера возьмем стандартный веб-сайт с контентом слева, навигационной панелью (navigation bar) справа, заголовком и нижним колонтитулом. Код будет таким:
Теперь необходимо разобраться, что же здесь написано. Родительский элемент, в котором находится основная часть html-кода, назван контейнером (container). Он позволяет не дать элементам, к которым применена функция Float, разбрестись в разные стороны. Если бы его не было, то эти элементы уплыли бы до самых границ браузера.
Затем, в коде идут #content и #navigation. К этим элементам применяется функция Float. #content отправляется налево, а #navigation идет направо. Это необходимо для создания сайта из двух колонок. Обязательно нужно указать ширину, чтобы объекты не наложились друг на друга. Ширину можно указывать и в процентах. Так даже удобнее, чем в пикселях. Например, 45 % для #content и 45 % для #navigation, а оставшиеся 10 % отдать свойству margin.
Свойство Clear, которое находится в #footer, не дает нижнему колонтитулу последовать за #navigation и #content, а оставляет его на том же самом месте, на котором он и находился. Что может произойти? если не указать свойство Clear? В данном коде #footer просто-напросто пойдет вверх и окажется под #navigation. Это случится из-за того, что у #navigation достаточно места для размещения еще одного элемента. На этом наглядном примере очень хорошо видно, как свойства Clear и Float дополняют друг друга.
Неприятности, с которыми можно столкнуться при написании кода
Указанные выше примеры достаточно просты. Но и с ними могут возникнуть проблемы. Вообще, на самом деле, множество неожиданных неприятностей может случиться с функцией Float. Как бы ни было странно, но проблемы обычно возникают не с CSS, а с html-кодом. Место, где расположен элемент с функцией Float в html-коде, напрямую влияет на работу последней. Для того чтобы избежать различного рода затруднений, лучше всего придерживаться простого правила - располагать элементы с функцией Float первыми в коде. Почти всегда это работает и сводит к минимуму их неожиданное поведение.
Столкновение элементов
Столкновение происходит, когда родительский элемент, содержащий несколько дочерних, не может их все вместить, и они накладываются друг на друга. Случается даже, что элементы могут не отображаться, а исчезнуть с сайта. Это не баг браузера, а вполне ожидаемое и должное поведение элементов с функцией Float.
Из-за того, что эти элементы сначала находятся в нормальном течении, а затем оно нарушается свойством Float, браузер может убрать их со страницы сайта. Однако не стоит отчаиваться, ведь решение простое и ясное - использовать свойство Cear. Возможно, что из всех способов выхода из этой проблемы применение Clear является самым действенным.
Но проблему столкновения элементов веб-страницы можно решить и по-другому. Существует еще по крайней мере два способа:
- использование функции Position;
- применение Flexbox.
Функция Position порой является неплохой альтернативой CSS Float. По центру веб-страницы в случае применения Position лучше всего расположить изображения. Если правильно применить значения:absolute и:relative, то элементы встанут на свои места и не будут накладываться друг на друга.
Разбор кода функции Position и Float
Стоит разобраться подробнее с тем, как в коде HTML и CSS Float заменить на Position. На самом деле это очень просто. Допустим, есть элемент #container и #div.
В данном примере использование во втором контейнере функции (CSS Div) Float поможет создать стандартный сайт из двух колонок. Никогда не стоит забывать о функции Clear. Без нее получится только наложение элементов друг на друга.
Итак, как же изменить код CSS и Float так, чтобы использовать Postion? Очень просто:
position:relative;
position:relative;
В таком случае #container и #div примут нужное разработчику положение в родительском элементе. Главное? поместить #div и #container в один родительский элемент, который будет соответствовать их размерам.
Flexbox - как эта функция поможет заменить CSS Float?
Flexbox - самый продвинутый способ создания веб-сайтов на данный момент, поэтому эта функция не поддерживается старыми версиями браузеров. Этот факт не стоит сбрасывать со счетов, ведь пользователи с устаревшими версиями браузеров не смогут увидеть корректную версию сайта.
Flexbox не является свойством, а отдельным модулем. Поэтому flexbox поддерживает целый ряд свойств, которые работают только с ним. К тому же у функции display, которая имеет три параметра inline, block и inline-block в flexbox остается только одна flex-flow.
Как работает Flexbox?
Эта технология поможет разработчику легко выровнять элементы по горизонтали и вертикали. Также Flexbox может изменить направление и порядок отображения элементов. У этой технологии существует две оси: Main axis и Cross axis, вокруг которых и строится весь Flexbox. Также он убирает действие функций Float и Clear. Он строит свою систему в коде, в которой использует свойственные только ему свойства, поэтому, к сожалению, не удастся продублировать в элементах другие свойства, такие как Float и Position. А это было бы очень кстати, ведь, как говорилось выше, Flexbox работает только в новых версиях браузеров.
Стоит помнить, что в конечном итоге Position, Flexbox и Float делают одно и то же - создают необычный и оригинальный дизайн вашего сайта. Каждый вариант из рассмотренных в статье делает это по-своему и поэтому имеет как преимущества, так и недостатки. К тому же бывает, что где-то отлично подойдет функция Float (например, в сайте с простой структурой), а где-то лучше использовать Position или Flexbox.
Double Margin Bug
Однако иногда, к сожалению, у каждого разработчика возникают проблемы, связанные не с написанным кодом, а с багами в каком-то конкретном виде браузера. Например, в Internet Explorer существует баг, который называется Double Margin Bug. Он умножает параметр Margin на два, что приводит к смещению элементов сайта за границы браузера. Чтобы избежать этого, достаточно указать параметр Margin в процентах. Обычно этот баг происходит тогда, когда значение у свойства Margin и Float совпадает.
margin-left:10px;
Такой код сместит элемент в Internet Explorer на 20 px влево. Можно изменить код так:
margin-left:10%;
или же так,
margin-right:10px;
Оба эти варианта решат проблему смещения элементов.
Баги браузера и некорректное отображение сайта
Стоит помнить, что Internet Explorer - не единственный браузер, в котором могут возникать баги. Старые версии Google Chrome и Mozilla также некорректно отображают некоторые элементы современных веб-сайтов. Для каждого из этих багов можно найти решение. В целом хочется отметить, что использование Float создаст оригинальный и привлекательный дизайн сайта. Понимание основ и принципов работы этого свойства позволит избежать ошибок и облегчит жизнь любому разработчику.
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none , элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
float: left | right | none | inherit
Значения
left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none Обтекание элемента не задается. inherit Наследует значение родителя.HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства float
Объектная модель
document.getElementById("elementID ").style.styleFloat
document.getElementById("elementID ").style.cssFloat
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
В современном веб дизайне свойство float используется почти на каждом шагу. Но не смотря на такую распространённость не все понимают механизм работы плавающих блоков, их поведение и какие последствия могут быть от их использования.
Что такое "float"?
Float это свойство CSS позиционирования. Что бы понять его суть и происхождение нужно обратить своё внимание на печатный дизайн. В печатных макетах изображение может быть расположено так, что текст обтекает его. Обычно это и называется "обтекание текстом ".
В макете страницы, блоку который содержит текст можно указать использовать обтекание текстом изображения или игнорировать обтекание. Игнорирование обтекания текстом позволит расположить слова в потоке поверх изображения, как будто его и нет. В этом и состоит разница является изображение частью потока на странице или нет. В веб дизайне всё очень похоже.
В веб дизайне элемент с применённым к нему CSS свойством float будет вести себя как изображение с обтекающим его текстом в печатном макете. Плавающие элементы остаются частью потока веб страницы. Это совсем не то, что элементы с абсолютным позиционированием, которые удаляются из потока, как если бы в печатном макете текстовому блоку указали игнорировать обтекание изображения. Элементы с абсолютным позиционированием не влияют на размещения других элементов и другие элементы не влияют на их размещение.
Установка свойства float для элементов с помощью CSS выглядит следующим образом:
#sidebar { float: right; }
Есть четыре допустимых значения для свойства float - left , right , none , inherit . Первые два, left и right указывают направления расположения - слева и справа, соответственно. None - значение по умолчанию, указывает что элемент не плавающий и inherit указывающий элементу наследовать значение свойства float от родительского элемента.
Для чего используется float?
Помимо простого примера обтекания текста вокруг изображения, float можно использовать для создания веб макетов.
Float , так же удобно использовать для небольших элементов макета. К примеру, возьмём этот небольшой фрагмент веб страницы. Если мы установим свойство float для небольшого изображения аватара, то когда изменится размер изображения обтекание измениться в соответствии с новыми размерами изображения:
Такой же макет можно реализовать с использованием относительного позиционирования контейнера и абсолютного позиционирования аватара и текста в нём. Но в макете реализованном по такой схеме изменение размера изображения не повлияет не текстовый блок, так как элементы с абсолютным позиционированием не оказывают влияния на другие элементы и другие элементы не влияют на них.
Сброс обтекания
Clear родственное свойство свойству float . Элемент с установленным свойством clear не будет двигаться вверх обтекая элемент с установленным свойством float , но будет смещаться вниз игнорируя обтекание. И снова иллюстрация, которая объяснит всё без лишних слов.
В приведённом выше примере, боковая панель "плавала" справа от блока основного контента. "Подвал" переместился в свободное место под боковой панелью, обтекая блок с основным контентом. Для решения этой проблемы необходимо указать значение свойства clear:both "подвала" для "очищения" обтекания обоих столбцов.
#footer {
clear: both;
}
Свойство clear имеет четыре значения. Both используется для сброса обтекания в обоих направлениях. Left и Right используются для сброса одного направления - левого или правого, соответственно. None - значение по умолчанию. Inherit может быть пятым значением, но оно на удивление не поддерживается Internet Explorer . Сброс только левого или правого обтекания встречается довольно редко, но имеет практическую пользу.
Великий коллапс
Одна вещь в работе с float вызывает недоумение, это то какое влияние это свойство оказывает на родительские элементы. Если родительский элемент не содержит элементов, кроме плавающего, то его высота буквально коллапсирует. Это не всегда заметно, особенно если родительский элемент не имеет заметного фона, но важно об этом помнить.
Но альтернатива такого коллапса ещё хуже. Рассмотрим следующий сценарий:
Если верхний блок автоматически расширится для размещения плавающего элемента, то мы получим разрыв в потоке текста между параграфами, без возможности его устранения. Если бы это было так, то разработчики жаловались бы гораздо чаще на такое поведение плавающих блоков, чем сейчас на коллапс.
О коллапсе всегда необходимо помнить, что бы предотвратить странное поведение макета и кросс-браузерные проблемы. Мы можем решить эту проблему используя clear после плавающего элемента в контейнере, но до закрытия контейнера.
Техники отмены обтекания
Если вы находитесь в ситуации, когда знаете где будет находится следующий элемент, вы можете использовать clear:both и заниматься дальше своими делами. Это идеальный вариант, так как он не требует ни хаков, ни дополнительных элементов. Но к сожалению обычно не всё идёт так как мы хотим и в этом случае можно использовать следующие инструменты.
Метод пустого блока.
Это в буквальном смысле пустой блок.
. Иногда можно встретить элемент
или любой другой случайный элемент, но div
наиболее распространён поскольку он не имеет в браузерах стиля по умолчанию, не имеет специальной функции и вряд ли будет в общем стиле CSS
. Этот метод отвергают семантические пуристы поскольку его присутствие не имеет контекстного смысла на странице и он расположен там только для внешнего вида. Конечно, в строгом смысле они правы, но он выполняет свою работу и никому не вредит.
Метод переполнения.
Основан на указании CSS свойства overflow для родительского элемента. Если это свойство установлено в auto или hidden для родительского элемента, то он будет расширятся вслед за плавающим элементом эффективно сбрасывая обтекание его для последующих элементов. Этот метод может быть семантически красив, так как не требует дополнительных элементов. Однако, как вы видите мы добавили новый div для использования этого метода, что эквивалентно использованию не семантического пустого блока и менее гибко. Так же следует помнить, что свойство overflow предназначено не для отключения обтекания. Будьте осторожны что бы случайно не скрыть контент или вызвать нежелательные полосы прокрутки.
Метод лёгкой очистки.
Использует CSS псевдо-селектор (:after ) для удаления обтекания. Вместо использования свойства overflow для родительского элемента установите дополнительный класс для него, например "clearfix" и используйте следующий стиль CSS :
Clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }
Здесь используется маленький фрагмент контента скрытый от просмотра, расположенный после родительского элемента, который сбрасывает обтекание. Это метод не является полноценным, так как для поддержки старых браузеров его нужно доробатывать.
Разные ситуации требуют разных методов сброса обтекания. Возьмём для примера сетку разнотипных блоков.
Для лучшего визуального объединения аналогичных блоков мы должны начинать новую строку когда меняется цвет. Мы можем использовать метод переполнения или лёгкой очистки, если у каждой цветовой группы есть родительский элемент. Или используем метод пустого блока между группами. Три родительских блока, которых ранее не существовало или три пустых блока, которых ранее не существовало. Вам решать какой метод лучше.
Проблемы с плавающими элементами
Плавающие элементы часто ругают из-за их хрупкости. Большая часть этой хрупкости идёт от IE6 и его float-ориентированных багов . Но поскольку всё больше и больше разработчиков отказывается от поддержки IE6 , вы можете об этом не думать, но для тех кто заботиться о совместимости вот краткий список.
Выталкивание (pushdown) , является симптомом того, что элемент внутри плавающего блока шире этого блока (обычно это происходит с изображениями). Большая часть браузеров будет отображать торчащую часть из плавающего элемента, но это не будет оказывать влияния на макет. IE будет расширять плавающий блок и часто это оказывает радикальное влияние на макет. Типичным примером является изображение торчащие из блока с основным контентом, выдавливающее боковую панель вниз.
Быстрое решение проблемы : используйте overflow: hidden; для обрезания излишков.
Баг с двойными полями (double margin bug) - ещё одна вещь о которой необходимо помнить работая с IE6 . Этот баг выражается в том, что если поле находится с той же стороны куда ориентирован float , поле удваивается. Например:
Мы получим слева поле в 40 px ., вместо 20 px .
Быстрое решение проблемы : установить display: inline для плавающего блока, и не волнуйтесь элемент останется блочным.
3х пиксельный толчок (3px Jog) . Суть этого бага в том, что текст расположенный рядом с плавающим элементом странным образом смещается на три пикселя, как будто под воздействие силового поля расположенного вокруг плавающего элемента. Быстрое решение проблемы : установить ширину и высоту пострадавшего текста.
В IE7 появляется Баг нижнего отступа (bottom margin bug) , когда родительский элемент является плавающим и его потомок расположенный внутри него тоже плавающий элемент. Нижнее поле (margin-bottom ) потомка игнорируется, элементом предком. Быстрое решение проблемы : Использовать нижнее поле (padding-bottom ) в родительском элементе, вместо нижнего отступа (margin-bottom ) потомка.
Интернет Windows 7, XP Windows 8 Windows 10 Безопасность Советы Программы Гаджеты Настройка Wi-Fi Телевизоры
Mozilla Firefox – мощный и удобный браузер, функционал которого можно значительно расширить за счет специальных дополнений, которые можно загрузить из магазина, встроенного в браузер. В этой статье я хочу вам рассказать о дополнении Speed Dial – удобной и
С расширением dmg чаще всего встречаются пользователи операционной системы Mac OS. Файл dmg представляет собой классический образ диска. В файле с текущим расширением могут храниться любые данные по аналогии с . Дополнительно нужно . Данная статья расскаж
Существует такое мнение, что лучше купить прошлогодний флагман, чем новую модель среднего класса. В мире Android-смартфонов это правило работает безотказно, но можно ли его применить к царству Apple? Для этого мы взяли прошлогодний iPhone X и новейший iPh
Последние материалы