Float или position css

Взаимодействие CSS свойств ‘float’, ‘position’ и ‘display’

На размещение элементов на Web странице большое влияние оказывают их CSS свойства ‘float’, ‘position’ и ‘display’. При этом каждому элементу соответствует (или отсутствует) бокс в соответствии с правилами Модель CSS бокса . Эти боксы формируются под воздействием ряда факторов, например:

• размера и типа бокса(блочный бокс или строчный);
• схемы позиционирования(нормальный поток, плавающий, абсолютный);
• взаимодействие элементов;
• внешних факторов(размеров экрана просмотра и прочее)

Поэтому очень важно знать правила их взаимодействия, ведь это определяет внешний вид страницы. А взаимодействуют эти свойства следующим образом.

1. Если элементу установлено display:none; то бокс не генерируется, а значения свойств float и position игнорируется.
2. Иначе, в случае установки position:absolute или position:fixed, свойство display устанавливается в значение block, а float принимает значение none. При этом позиция элемента на странице будет определяться величинами смещений top, right, bottom и left. При свойстве position:absolute смещения отсчитываются от границ контейнера, у которого в CSS стоит значение position:relative. При значении position:fixed смещения отсчитываются от границ окна просмотра, элемент при этом не изменяет своего положения при скроллинге.
3. Иначе, если установлено float:left или float:right, свойству display устанавливается значение block и элемент становится плавающим.
4. Иначе применяется оставшееся значение свойства display.

Примечание. Если значения этих свойств изменяются скриптом, то поведение элемента не будет однозначно определено.

Источник

Изучаем CSS-позиционирование за 10 шагов

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float.

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:

Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

На данном этапе может показаться, что относительное позиционирование не так уж и полезно, но, не спешите с выводами, далее в статье, вы узнаете, для чего его можно использовать.

3. position: absolute

При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.

В IE с position: fixed не все так гладко, как бы нам хотелось, но существует #content < position:relative; >#div-1a

6. Две колонки

Вооружившись знаниями из предыдущих шагов, можно попробовать сделать две колонки, с помощью относительного и абсолютного позиционирования.

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

Решение не очень подходящее, поскольку мы никогда не знаем заранее, какого размера текст, будет расположен в колонках, и какой шрифт будет использован.

8. Float

Для колонок с переменной высотой, абсолютное позиционирование не подходит, поэтому давайте рассмотрим другой вариант.

Назначив блоку float, мы максимально возможно оттолкнем его к правому (или левому) краю, а следующий за блоком текст, будет обтекать его. Обычно такой прием используется для картинок, но мы будем использовать его для более сложной задачи, поскольку это единственный инструмент, имеющийся в нашем распоряжении.

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.

Но теперь у нас появилась другая проблема – колонки выходят за пределы родительского контейнера, тем самым ломая всю верстку. Эта самая распространенная проблема начинающих верстальщиков, хотя решается она довольно просто.

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

Или же назначить родительскому контейнеру свойство overflow: hidden

В любом случае, результат будет один и тот же.

Заключение

Сегодня были рассмотрены только базовые приемы позиционирования, и самые простые примеры. Также, в помощь начинающим верстальщикам я всегда рекомендую цикл статей Ивана Сагалаева, которые в свое время мне очень помогли.

Источник

Как делать разметку страницы, position или float?

Изучаю по чуток html/css но немогу понять как мне делать разметку страницы для дальнейшей верстки. позиционировать блоки position: ralative/absolute или float ? какбы и так и так можно секу для сайта сделать но мне проще с помощью относительного и абсолютного позиционирования расставить блоки как нужны и дальше верстать сайт.

Оценить 1 комментарий

Читайте что вам написал Pretor DH . Если вы все блоки будете в относительную позицию ставить и потом их двигать — то лучше забросьте верстку вообще.

Для построения сеток есть замечательное свойство flex, на которое скоро все перейдут. А пока оно браузерами поддерживается не полностью, используйте float.

у меня в ходе изучения возник этот вопрос, я понимаю что я могу задать в css position:relative; и маргинами указать отступы, и таким «колхозным» вариантом спозиционировать все содержимое страницы.
также понимаю что можно использовать float. я лишь хочу понять как мне делать «правильно»
как я понимю сетку сайта делать float`ами а уже более мелкие блоки внутри сетки можно позиционировать с помощью position ?

Yarosh841: Да, сетку флоатами. А position для иконок, каких-то локальных элементов. Еще для фиксации меню используется

Попытаюсь объяснить своими словами.

Поток набор элементов соотносящихся между собой как соседи имеющие общее начало координат, при этом элементы дети наследуют поток. Где каждый блок имеет свое последовательно зарезервированное пространство.
Резервирование пространства под блок тоже имеет свою логику и задается в display.

• float не отделяет блок от потока, смещает в край и минимизирует резервированное пространство для блока и применяет размеры. «Дети» остаются в старом потоке (Float child имеет ширину и начало координат от прародителя). Float удобен для набора блоков в стаки — так как край берется с учетом резервированных пространств, и флоат блоки не перекрываются. aside — можно(но не всегда) делать через ;
• relative блок не отделяется от родительского потока, а только корректирует свою координату и применяет размеры, пространство выделенное для блока остается. «Дети» получают новый внутренний поток. Используй для корректировки позиции блока. Создавай новые потоки для детей, без изменений для самого блока;
• absolute используется чтобы явно создать в родительском потоке, новый поток равный родительскому — с началом координат родительского. Пространство в родительском потоке не выделяется. «Дети» получают новый внутренний поток. В основном используется для всяких «дополняшек» привязаных к блоку. aside в большинстве случаев делаются им.;
• fixed используется чтобы создать независимый поток который позиционируется относительно окна. Fixed удобно делать header видимый всегда при прокрутке страницы.;

Подобьем итог
header, footer — static или fixed (в редких случаях absolute);
content — принято оставлять statiс. Пусть контент лежит в основном потоке;
aside — absolute или на крайняк float;
Всякие изыски modal, action (типа хрестика на закрытие модального) — absolute;

P.S. Но как всегда есть исключения и нужно думать своей головой. Или если мозг не настроен думать пользоваться шаблонами.
P.P.S. Ксати есть flex — штука очень хорошая для тех кто думает своей головой. Ибо енто мутант со тремя головами и двенадцатью глазищами. 😉

Источник