Значения float css. Параметры размещения контейнеров float и clear в CSS — инструменты блочной верстки. Атрибуты тега HTML
Пару лет назад, когда разработчики впервые начали переходить к 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" завершена. Пусть времени ушло много, но мне думается, что мне удалось максимально доходчиво свести все многообразие поведений этого мощного и несколько странного свойства в одну общую систему.
Кроме того, эта статья содержит рекордное количество иллюстраций среди всего "Учебника " :-)
Судьба свойства "float" в CSS слегка похожа на судьбу тега "table" в HTML: ни то, ни другое вообще не задумывалось как средство создания колонок и вообще раскладки элементов. Однако из-за определенных несовершенств механизма позиционирования float используется для этой цели очень широко. А то, что придумывался он для другого, частенько проявляется разными неочевидными эффектами. Однако перед тем, как их показать, я все же расскажу, как float"ы можно применять для раскладки.
В самом начале - небольшое замечание о терминах. В русском языке не сложилось никакого известного термина для этого инструмента (пока, по крайней мере). Поэтому я предпочитаю писать его в исходном написании - "float". Читается это примерно как "флоут" (ломать скулы произношением "флоАт" не нужно). Заодно тут же прошу простить мне такие вольности как "заfloat"ить", "приfloat"нутый" и т.п. :-)
Принцип работы
Как и позиционирование, float используется для того, чтобы двигать боксы. Но в отличие от позиционирования, которым можно двигать боксы практически произвольно, все, что может float - это сдвинуть элемент к одной из сторон потока , правой или левой.
При этом сам бокс и следующие за ним в потоке приобретают интересное поведение:
- Float"нутый бокс смещается по горизонтали и прилипает к одной из сторон родителя.
- Float"нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.
- Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы float"нутого бокса в потоке не было.
- Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать float"нутый бокс со свободной стороны.
Хочу еще раз подчеркнуть неочевидную сразу вещь: сама коробка блока, следующего за float"ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.
Дальше интересно, как себя ведут float"нутые в одну сторону боксы, которые идут один за другим. В этом случае следующий бокс будет пытаться уместиться сбоку от предыдущего, с его свободной стороны. И только если ему там не будет достаточно места, тогда он сместится ниже и будет пытаться уместиться уже там.
Есть еще один маленький технический аспект, не обязательный для понимания всей "механики". Заfloat"ить можно как блочные боксы, так и строчные. При этом строчные тут же автоматически становятся блочными. То есть, писать display:block; для float"а излишне.
Из двух описанных особенностей float"ов - прижимание к краю и стыкование сбоку друг друга - вытекают два основных применения их в раскладке:
- разделение страницы на колонки
- горизонтально расположенные меню
Колонки
Колонки - это когда блоки текста расположены рядом друг с другом и имеют одинаковую высоту.
Все колоночные раскладки я буду рассматривать на вот таком простейшем HTML"ном коде с двумя блоками:
Сразу стоит сказать, что делать колонки в растягивающемся по ширине контейнере сложнее, чем с заданной шириной. Тут есть два принципиально разных подхода, подходящих для разных случаев.
Пропорциональная ширина
Если нужно, чтобы ширина колонок менялась пропорционально, при изменении ширины страницы, то подход такой:
#content { float:right; width:70%; } #sidebar { float:left; width:30%; }
То есть два блока float"ятся рядом в разные стороны, а их ширина делится в нужном процентном соотношении. Этот способ позволяет легко поменять колонки местами - просто поменяв значения right и left .
Растягивание только одной колонки
Если нужно, чтобы менялась только ширина основной колонки, то предыдущий способ не подходит. Дело в том, что в CSS, к сожалению, нельзя напрямую сформулировать такую вещь как "вся доступная ширина минус конкретное число".
Теперь обратимся к одной из предыдущих статей про блоки в потоке , где я упомянул об одной их полезной особенности автоматически укладываться по ширине в размер родительского бокса. То есть, если блоку в прямом потоке задать, скажем, левый margin, то его ширина соответственно ужмется. А это именно то поведение, которого мы хотели добиться от одной из колонок.
Итак, для нужного нам эффекта мы дадим основному блоку левый margin, чтобы он ужался направо, а боковую панель заfloat"им на это место:
#sidebar { float:left; width:200px; } #content { margin-left:200px; }
Но у второго способа есть один очень серьезный недостаток. Обратите внимание, что в исходном HTML блок "sidebar" идет до блока "content" с основным содержимым. Не нужно думать, что так сделано случайно:-). Так сделано специально, потому что иначе этот самый второй способ с наложением колонки поверх margin"а не работал бы.
Как я написал в начале статьи, float"ы сдвигаются только в сторону и дают место следующим блоками, которые съезжают наверх. Поэтому принципиально, чтобы "sidebar" был уже наверху, и тогда основной блок подъедет к нему. Если "sidebar" идет после основного блока, то он так и останется ниже, и ни на какие колонки это похоже не будет.
Это действительно плохо, потому что перечеркивает одну из основных идей CSS: отделение оформления от содержания. Получается, что мы захотели изменить только дизайн, а если блоки расположены "не так", то придется лезть еще и в HTML-шаблоны. Кроме того, с точки зрения структуры могут быть свои веские основания располагать блоки так, а не иначе. Например чтобы пользователь мог начать читать основной текст страницы, не дожидаясь загрузки навигации.
Фиксированная ширина
Все резко упрощается, когда колонки помещаются в фиксированную ширину контейнера. В этом случае лучше всего использовать первый способ (float"ить все колонки), и ширину уже можно задавать не только в процентах, но и в чем хотите, поскольку ее можно точно вычислить.
Высота колонок
Опять-таки, я далеко не случайно "отрезал" на картинках нижнюю часть блоков:-). Иначе бы они как колонки совсем не выглядели, потому что, как нетрудно убедиться, если применить те фрагменты CSS, что я привел, и раскрасить колонки разными цветами, то их высота оказывается разной. Она зависит от количества содержимого в этих блоках.
Этот некрасивый эффект можно обойти несколькими способами.
Первый способ называется "Ложные колонки" ("Faux columns"), опубликован в авторитетном веб-журнале A List Apart в сентябре 2004 года и с тех пор пользуется большой популярностью. Всем рекомендую прочитать либо оригинал , либо русский перевод . Однако если вы сегодня не в настроении кликать, то вот кратко его суть.
Вместо того, чтобы назначать фон самим колонкам, они оставляются прозрачными, а вот их контейнеру назначается фоновая картинка шириной во весь контейнер и повторяющаяся по вертикали. Части этой картинки, находящиеся под разными колонками, красятся в разные цвета и при повторении вниз это дает нужный визуальный эффект.
Что в ложных колонках замечательно - так это то, что вы можете не ограничивать себя на фоновой картинке ровными цветами. На ней, например можно нарисовать эффект тени между колонками, повторяющиеся горизонтальные полоски в виде фона, орнамент по краям.
Недостаток же способа состоит в том, что поскольку у фоновой картинки есть только один размер, ее нельзя применять для пропорционально растягивающихся колонок, так как картинка тянуться не будет. А вот для случая, когда одна из колонок фиксирована по ширине, фон приспособить можно (этот случай, кстати, в "Faux columns" не рассмотрен).
Суть состоит в том, чтобы поместить фоновую картинку только под ту колонку, ширина которой известна. Остальное место будет занято фоновым цветом контейнера, а не картинкой.
Возьмем наш пример и сделаем колонку "sidebar" справа шириной 200 пикселов, а "content" пусть растягивается. Для "sidebar" подготовим картинку размерами 200х1 например ровного синего оттенка. А под "content" отведем желтоватый.
В стилях это выглядит так:
#sidebar { float:right; width:200px; } #content { margin-right:200px; } body { background:url(bg.png) #FFD right top repeat-y; }
Единственное правило для контейнера (body) задает все поведение фона:
- указывается URL картинки (bg.png)
- цвет фона в тех местах, где ее не будет (#FFD)
- положение картинки прижатой к правому краю (right top)
- повторение картинки вниз (repeat-y)
В реальном примере в CSS еще была пара правил для цвета букв и борьбы с границами, которые сейчас не существенны.
Другой способ уравнивания колонок по высоте был описан недавно и уже сильно известен, поскольку удобен.
Идея его состоит в том, чтобы неравенство высот колонок спрятать, неимоверно удлинив их вниз, чтобы их концы были за пределами реального содержимого страницы. Добиваются этого тем, что сначала ставят колонкам очень большой отступ (padding) вниз, который закрашивается цветом фона. А чтобы все остальное содержимое тоже не сдвигалось туда далеко, колонкам назначается отрицательная граница (margin) такого же размера:
Странное число обусловлено тем, что это максимум, который может позволить браузер Safari. На самом деле оно не настолько странное. Кому интересно, это максимальное знаковое целое число, если представлять его 16 битами.
В итоге все, что идет за колонками смещается и находится прямо под содержимым самой длинной из них, а колонки удлиняются вниз. Некрасиво одно - из-за длинных колонок сама страница становится такой же длинной. Чтобы с этим бороться, надо их контейнеру проставить свойство overflow:hidden , которое заставляет контейнер просто отрезать и не показывать то, что выходит за его пределы.
У моего примера, который я взял в самом начале, есть, правда, одна загвоздка. Там колонки лежат прямо в body . А если body проставить overflow:hidden , то браузеры отменяют скроллинг у страницы начисто. Даже если реальное содержимое выше окна. Поэтому колонки надо завернуть в еще один элемент, например div . Но справедливости ради надо сказать, что на практике колонки и так бывают во что-нибудь уже завернуты.
Засада
Куда ж без нее:-). Как я не особенно прозрачно намекнул в самом начале, поскольку float"ы не придумывались как средство создания колонок, это обязательно вылезет чем-нибудь уродливым и аукнется увеличением расхода анальгина (некоторые предпочитают темпалгин или парацетамол).
Причем "вылезет" - в прямом смысле. Давайте немного подвинем наш "голый" пример в сторону реальности, добавив над колонками шапку и внизу какой-нибудь тоже блок с текстом.
Для простоты выберем нехитрый колоночный дизайн с фиксированной шириной. Шапку и нижний блок сделаем синими с белыми буквами, основное содержимое белым, а дополнительную колонку тоже синей, но чуть светлее. Цвета колонкам зададим способом "Faux columns".
/* Раскладка в колонки */ body { width:600px; margin:0 auto; } #content { float:left; width:450px; } #sidebar { float:right; width:150px; } /* Цвета */ #main { background:url(bg.png) right top repeat-y; } #header, #footer { background:#238; color:white; }
Всякие отступы и шрифты я снова опустил для простоты восприятия. Добавим тестового текста и запускаем:
Хм... Ну, колонки, в общем, даже можно разглядеть! Не придерешься! Однако как ни крути, но выглядит все не так, как задумано, а даже можно сказать, все превратилось в некую кашу из цветов и букв.
Чтобы понять, почему так происходит, надо вспомнить описание того, как работает float. А именно, что блоки, идущие за float"ами перестают эти float"ы замечать и подтягиваются вверх. Более того, сам контейнер, в котором float"ы находятся, тоже перестает их замечать и float"нутые блоки проваливаются через низ контейнера, если он заканичвается раньше.
Теперь посмотрим на наш код. Оба float"нутых блока "content" и "sidebar" находятся внутри блока "main". И больше ничего в "main" нет. А раз ему нечего больше содержать, то его высота схлопывается в нуль! Поэтому и не видно на картинке ни белого фона "content", ни светло-синего фона "sidebar", потому что эти цвета назначены в виде фона "main".
Дальше - "footer". Он, подчиняясь все тому же правилу, тоже не видит float"нутых блоков и подтягивается наверх прямо к самому заголовку (поскольку "main" - нулевой высоты). Но в "footer" есть текст. Текст этот уже должен обтекать float"ы: справа "content" и слева "sidebar". Между колонками места не осталось, поэтому текст может начаться только под одной из колонок, которая первая кончится. Там он и есть. Таким образом, "footer", подтянувшись под заголовок, продолжается вниз, пока не закончится весь его текст. И весь этот синий фон, что ниже заголовка - это "footer" и есть.
Зачем такая сложность
Описанное поведение должно внушать недоуменние. Зачем надо было придумывать такие сложности: разделить понятие блока так, чтобы цвета и рамки наверх, а текст - на месте? Но смысл, конечно, есть. Это, наряду со схлопыванием границ , попытка заставить боксовую модель CSS нормально вести себя в условиях простого потока текста. Подробное классическое объяснение этому феномену есть все у того же Эрика Мейера в статье "Containing Floats " (на английском). Постараюсь кратко передать суть.
Представьте себе обычный поток абзацев - блоков с текстом - без всякого позиционирования. В одном из абзацев встречается картинка, которую хочется сдвинуть, скажем, влево, чтобы текст ее обтекал. Такое раньше в HTML достигалось свойством align="left" , но в духе вынесения оформления из HTML в стили, для этой функции как раз и придумали свойство float . То есть вместо align этой картинке приписывается float:left .
Пусть сдвигаемая картинка занимает по высоте больше, чем текст абзаца. Если она будет растягивать свой абзац и отодвигать начало следующего ниже, то это будет выглядеть некрасиво из-за увеличенного расстояния между строками соседних абзацев. Поэтому она и проваливается через все границы блоков, сохраняя между ними красивые отступы, а текст ее обтекает.
Решения
Итак, поведение с проваливанием понятно, но оно удобно для непозиционированного текста, а для раскладки - совсем неудобно. Существует два подхода устранящих оба проявления этого свойства: подтягивание следующих боксов наверх и проваливание через низ контейнера.
Для устранения подтягивания блоков существует специальное свойство - clear . Оно заставляет элемент сдвигаться вниз, пока сбоку от него не останется float"ов. Причем можно управлять, с какого именно бока не должно быть float"ов:
Clear:left следит, чтобы float"ов не было слева clear:right следит, чтобы float"ов не было справа clear:both следит, чтобы float"ов не было с обеих сторон
Таким образом, если мы скажем нашему "footer"у:
#footer { clear:both; }
Чтобы слева и справа от него не было float"нутых колонок, то он сдвинется вниз как раз туда, где они обе кончаются.
Но это не решает другой проблемы: того, что float"ы проваливаются через "main", и тот схлопывается, в результате чего не видно колоночного фона, который ему назначен. Проваливание можно победить двумя способами.
Можно явно спозиционировать контейнер каким-нибудь образом. Насколько я понимаю логику спецификации, поведение проваливания считается логичным только в простом потоке. В других случаях оно только мешает. И так оно и есть, как мы убедились. То есть достаточно назначить контейнеру например position:absolute или float:left и ничего не будет проваливается, контейнер будет полностью заключать в себя и текст, и float"ы. В нашем случае (и в большинстве случаев, кстати) это решение вполне подойдет.
Другой интересный способ связан с побочным эффектом свойства overflow . Само по себе оно предназначено для того, чтобы определять, как будет вести себя контейнер при переполнении, когда не может вместить свое содержимое. У него есть четыре значения:
Visible содержимое переходит через край и его нормально видно (это поведение по умолчанию) hidden содержимое отсекается за границами контейнера и его там никак не видно auto если содержимое переполняет контейнер, у него появляется скроллбар, позволяющий проматывать содержимое, если нет - не появляется scroll похоже на auto , только скроллбар у контейнера есть всегда, даже когда содержимое его не переполняет
Так вот побочный эффект заключается в том, что если контейнеру поставить любой overflow, кроме обычного visible , он вдруг растягивается и заключает в себя float"ы, которые в нем сидят, устраняя проваливание.
Какой же overflow использовать? Сразу отпадает scroll - всегда висящие скроллбары явно не нужны. Остаются auto и hidden , которые отличаются только тем, появляется скроллбар при переполнении или нет. Но у нас никакого переполнения нет, наоборот, этим свойством мы заставили контейнер дополнительно растянуться, чтобы он охватывал все свои элементы. Поэтому использовать можно любое значение.
Я суеверно стараюсь использовать hidden , чтобы не появлялось скроллбаров, если из-за каких-то глюков переполнение вдруг возникнет.
У решения с overflow есть одна загвоздка, связанная с поведением Некоторого Браузера™. Оно работает только если контейнеру явно назначены ширина или высота. Из-за этого им иногда неудобно пользоваться, когда вам нужны автоматические размеры, а не жесткие.
Итак, в итоге, чтобы исправить наш пример с колонками, надо сделать так:
#main { width:100%; overflow:hidden; }
Кстати! Если бы для рисования фона под колонками я использовал не faux columns, а способ с длинным padding"ом, то он бы потребовал использовать overflow:hidden для "main", что заодно решает и проблему с проваливанием. Но как бы тогда я про это рассказывал?
Все на этом с колонками... Время сходить налить себе вкусного чаю (многие предпочитают кофе) и, прибавив к этому какую-нибудь вкусную булочку, сделать паузу для укладывания в голове всего этого месива. Дальше нас ждет маленькая добавка - про меню.
Меню
Напомню, что если несколько идущих подряд блоков заfloat"ить в одну сторону, то каждый следующий будет пытаться разложиться со свободной стороны от предыдущего. Этот эффект широко используется для того, чтобы превращать списки разделов сайта в горизонтально расположенные меню.
Возьмем такой список:
- Начало
- Каталог
- Корзина
- Справка
Чтобы это было похоже на меню, надо заfloat"ить все li влево, убрать у них атрибутику списка (отступы и буллиты) и еще добавить для красоты отступы, фон и рамку:
/* раскладка */ ul, li { float:left; list-style:none; margin:0; padding:0; } /* вид */ li { padding:2px 10px; font:Bold Small Tahoma; background:#35C; color:white; border:solid 1px; border-color:#46F #238 #238 #46F; } a { color:white; text-decoration:none; }
Обратите внимание, что для раскладки все свойства назначаются и для элементов ul , и для li . Это удобно свести в одно правило, потому что:
- float:left нужен элементам списка, чтобы они разложились горизонтально, а самому списку - чтобы элементы через него не проваливались;
- нулевые margin и padding устраняют отступы, которые браузеры делают для списков по умолчанию, но они это делают очень по-разному, поэтому проще сказать "всем всё по нулям", чем помнить что отдельно для какого элемента проставлять.
Мораль
Механизм float - еще одно средство раскладки наряду с абсолютным позиционированием.
Он отличаются в лучшую сторону, позволяя оставить элемент в потоке, что очень удобно для колоночной раскладки.
Однако его минусами является меньшая гибкость из-за того, что элементы нельзя двигать произвольно, и потому что возможность его применять может зависеть от порядка элементов в HTML-разметке.
Эта статья - часть находящегося в процессе написания цикла под рабочим названием "Учебник". Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории "Учебник ", где они сейчас собраны в обратном хронологическом порядке.
Атрибуты обеспечивают дополнительную информацию о HTML элементах.
HTML Атрибуты
- HTML элементы могут иметь атрибуты
- Атрибуты обеспечивают дополнительную информацию об элементе
- Атрибуты всегда указываются в начальном теге
- Атрибуты идут в парах имя/значение, например: имя="значение"
Пример Атрибута
Всегда Ставьте Кавычки У Значений Атрибутов
Значения атрибутов всегды должны быть заключены в кавычки.
Как правило, используют двойные кавычки, но одинарные кавычки также допустимы.
Совет: В некоторых редких ситуациях, когда значение атрибута само содержит кавычки, необходимо использовать одинарные кавычки: name="Иван "Vano" Петров"
Имена атрибутов и значения атрибутов не чувствительны к регистру.
Однако, Мировой Интернет Консорциум (W3C) рекомендует строчные атрибуты/значения атрибутов в HTML 4.
Более новые версии (X)HTML требуют строчные атрибуты.
HTML Справочник Атрибутов
Список всех HTML элементов вы найдете здесь:
Ниже список некоторых атрибутов, которые являются стандартными для большинства HTML элементов:
Более полную информацию о стандартных атрибутах смотрите здесь.
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства 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 равно none , элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
float: left | right | none
Аргументы
left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне. none Обтекание элемента не задается.
Lorem ipsum dolor sit amet, consectetuer 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 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.
Объектная модель
document.getElementById("elementID ").style.styleFloat
Форматирование
Похожие статьи
-
Как писать в саппорт яндекса в новом вебмастере Письмо платону яндекс
Как написать в Яндекс поддержку? Развитие сайтов зависит от многих факторов, в том числе и от того, как к ресурсу относятся поисковые системы. Нередко приходится наблюдать в статистике, как падают позиции площадки, вылетают некоторые
-
Параметры размещения контейнеров float и clear в CSS — инструменты блочной верстки
Пару лет назад, когда разработчики впервые начали переходить к HTML-разметке без таблиц, CSS свойство float внезапно взяло на себя очень важную роль. Причина того, что свойство float стало так распространено, состояла в том, что по...
-
Как заработать с помощью мобильного приложения Advertapp?
Здравствуйте! В этой статье мы поговорим про заработок на AdvertApp. Сколько можно заработать: до 50 рублей в день. Минимальные требования : наличие телефона и интернета. Стоит ли заниматься: только реферальной системой . Краткий обзор...
-
Сервисы распознования капчи
Масштабное обновление программы XRumer, в котором значительно эволюционировала логика регистрации профилей на самых разных платформах, улучшена работа с платформами Bitrix, Joomla, WordPress Forum, MyBB, VBulletin, XenForo, добавлен...
-
Чтобы клиент не заблудился: создаем меню группы ВК Как сделать интерактивное меню в контакте
На вопрос «как создать меню для группы ВКонтакте» есть три основных варианта ответа: заказать у специалиста, создать с помощью онлайн-конструктора или повозиться, вникнуть в некоторые тонкости вопроса и сделать все самостоятельно.В этой...
-
Что такое электронные деньги Еasypay Как создать электронный кошелек easypay в беларуси
Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу продолжить обзор , которые в той или иной степени популярны и используются в рунете. Ранее я ориентировался в основном на Россию, ибо сам являюсь гражданином этой страны, но рунет...