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

Question

[Yarosh841]

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

Comments

[Роман]

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

Answer 1

[dm]

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

Comments

[Yarosh841]

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

[dm]

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

Answer 2

[Pretor DH]

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

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

Смотим пример: JSFiddle

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

Все остальное это - Static.

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

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