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

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Попытаюсь объяснить своими словами.

    Поток набор элементов соотносящихся между собой как соседи имеющие общее начало координат, при этом элементы дети наследуют поток. Где каждый блок имеет свое последовательно зарезервированное пространство.
    Резервирование пространства под блок тоже имеет свою логику и задается в 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 - штука очень хорошая для тех кто думает своей головой. Ибо енто мутант со тремя головами и двенадцатью глазищами... ;)
    Ответ написан
    Комментировать