Какое значение по умолчанию принимает свойство float. Как работает свойство CSS float left и float right
После того как меня шестьдесят восьмой раз спросили почему блок с float отображается неправильно, я решил написать эту заметку, которая объяснила бы типичные ситуации, с которыми сталкивается начинающий верстальщик, а так же для того, чтобы в следующий раз просто дать ссылку на эту статью.
Disclaimer
Я не профессиональный верстальщик, хотя по роду моей деятельности мне пришлось сверстать не один десяток сайтов. У меня есть друзья, которые учатся верстать и я им хочу помочь. Скорее всего они есть и у вас. Цель этой статьи не рассказать что-то новое, а рассказать о старом с точки зрения наиболее часто возникающих у начинающих верстальщиков проблем. Я не претендую на абсолютную истину своих слов, и я буду только рад, если вы меня поправите и дополните.Свойства элемента с float, которые нужно всегда держать в голове
если оно установлено в значение left или right- Элемент отображается как блочный , так словно ему установлено свойство display: block;
- Элемент по ширине сжимается до размеров содержимого, если для элемента явно не установлена ширина width;
- Элемент прилипает к левому (left) или правому краю (right);
- Все остальное содержимое страницы, идущее в HTML коде после элемента с float, обтекает его;
Жизненный случай #1
У меня есть два блока, я применил к одному из блоков float: right, он выровнялся по правому краю, но все равно остался под первым. Пример как это выглядит.
Причина
Если так произошло, значит, вы применили float не к первому, а ко второму блоку. В силу того, что плавающий (тот, который с float) элемент обтекают только те элементы, которые идут в HTML коде после него, первый блок его обтекать не будет.Так же блочные элементы по умолчанию имеют максимально возможную ширину (пруф) в пределах родителя. Ваш плавающий элемент просто не помещается на одной линии с первым блочными элементами с максимальной шириной, поэтому он вытесняется вниз.
Так же всё содержимое сайта, которое идет в HTML коде после плавающих элементов, обтекает их, что часто приводит к неожиданному эффекту.
Решение
Решение #1. Явно задать высоту контейнера . В тех случаях, когда известно какими должны быть размеры контейнера, это самое простое решение.Решение #2. Добавить пустой блок с clear: both . Добавление подобного элемента отчищает «плавучесть» блоков и заставляет контейнер растягиваться на всю высоту. Семантически это не самое лучшее решение, так как вводит лишний элемент разметки.
Решение #3. Применить свойство overflow: auto (или hidden) к контейнеру . Заставляет контейнер заново рассчитать высоту и изменить ее так, чтобы включать плавающие элементы, иначе ему бы пришлось добавить полосу прокрутки или скрыть их. Впрочем, иногда это случается, поэтому будьте осторожны.
UPD
Так же читайте от как продолжение обсуждения свойства float.
Правильное использование CSS свойства float может стать непростой задачей даже для опытного верстальщика. В этой статье собраны варианты применения float, а также некоторые ошибки, с наглядными примерами.
Что такое float?
Некоторые элементы в CSS являются блочными и поэтому начинаются с новой строки. Например, если расположить два абзаца с тегами P, то они будут находиться друг под другом. Другие же элементы являются «строчными», т.е. отображаются на странице в одну строку.Один из способов переназначить элементам тип обтекания - это использование свойства float. Классический пример - использование float для выравнивания картинки по левому или правому краю. Вот простой HTML-код картинки и абзаца:
Lorem ipsum...
Они отображаются с новой строки:
Добавляем немного CSS картинке:
img {
float: right;
margin: 20px;
}
Получается выравнивание по правому краю:
Если текста больше, то абзац будет обтекать картинку:
Допустим, нам нужно сделать отступ в 20 пикселей между картинкой и текстом. Вот такая конструкция работать не будет: p {margin: 20px;}
Правильно вот так:
img {margin: 20px;}
Почему же не работает отступ для абзаца? Чтобы разобраться, добавим рамку:
P { border: solid 1px black; }
Результат может вас удивить:
Оказывается, картинка находится внутри абзаца! Поэтому и не работает свойство margin в первом случае. Чтобы исправить это, можно применить float:left к абзацу и указываем абсолютную ширину:
Странные правила float
Перейдем к более сложным вариантам использования float: к правилам, регулирующим плавающие объекты. Это бывает необходимо при верстке галереи изображений. Например:
По умолчанию каждый элемент списка появится с новой строки. Если применить к каждому float:left, изображения встанут в один ряд с переносом строки:
Li { float: left; margin: 4px; }
Но что, если изображения разной высоты?
Если мы добавим элементам списка отображение в одну строку, получится немного симпатичнее:
Li { display: inline; }
А теперь выравниваем по вертикали:
Img { vertical-align: top; }
Следует помнить, что в случае большей высоты картинок, остальные изображения обтекают только одно предыдущее, например:
Пример изменения очередности элементов - например, у нас есть список элементов по порядку:
Если мы хотим расположить их в обратном порядке, просто применяем 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 - как можно правее.
Форматирование каскадных таблиц). Этот язык существует с 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:
- Элемент «сплывает» и прижимается к левому (если float: left) или правому (float: right) краю родительского элемента или элемента которому тоже задано значение float
- Если элемент из-за ширины родительского блока не может встать в один ряд с другим элементом, он будет сдвинут вниз до того момента пока ему не хватит места
- Другие блочные элементы для которых значение float не задано ведут себя так, как будто элемента с float нет на странице (элемент «сплыл»). Строки «знают» что элемент всплыл и обтекают его
- Ширина блока, для которого задано значение float — определяется по содержимому.
Рассмотрим пример. Расскоментируйте свойство float: left внутри CSS. Посмотрите на результат.
Замените float:left на float: right.
Свойство float удобен для обеспечения обтекания картинок текстом. Рассмотрите пример:
Добавьте комментарий в строку CSS файла к свойству float: left. Просмотрите как изменится верстка страницы. Замените float: left на float:right.
«Схлопывание» родительского элемента при всплытии «дочерних»
Пусть внутрь элемента one помещен элемент two. По-умолчанию, высота one растянется по содержимому. Как только мы к элементу two применим свойство float, он всплывает, и родительский элемент one не будет знать что two существует. Если содержимого у two нет, то его высота равна нулю. Такое поведение называется «схлопыванием». Чтобы предотвратить схлопывание родителя ему задают либо свойство min-height — минимальная высота, либо применяют способ: добавляют еще однин блок, для которого задают свойство:
| 1 |
Данный блок не виден на странице, но свойство clear:both снимает обтекание элементов и растягивает родителя на высоту содержимого.
Снимите комментарий свойству float:left в CSS. Посмотрите как ведет себя родительский элемент:
Рассмотрите пример с применением clear: both
Итак вы ознакомились с основными свойстами float. Давайте применим знания на практике.
Выполнить
Задание 1. Добавьте изображениям классы. В классах укажите свойство float:left. Изучите как изменится вывод страницы.
Загрузка...
