Помогите, плиз. Кто может объяснить человечьим языком, или дайте ссыль на сторонние ресурсы.
Как понять, в каком порядке расставлять дивы в html?
сначала вроде все просто, сверху вниз. А потом вреде в примерах было слева направо, а в других справа налево. А если блок должен быть выше предыдущего или ниже, то какой тогда вообще предыдущий?
В общем каша полная. Задния делаю методом перебора. Хочу систему и порядок!
Это прекрасно объяснено в разделе “Сетки”. Но попробую чуть по-другому. Есть понятие - поток документа - это порядок расположения блоков div на странице. По умолчанию, если не задана стилизация, порядок расположения div на странице полностью соответствует расположению их в коде HTML, который прописываете Вы сам.
div - один из самых распространённый блочных элементов. Т.е, если Вы зададите даже пустому div-у, без какой-либо информации, границы в CSS, а также высоту, Вы его увидите - это будет или квадрат, или прямоугольник, стоящий или вертикально, или горизонтально - всё зависит от от его параметров.
Нужно помнить, что практически у всех элементов HTML есть значения по умолчанию. Так и у div-а - ширина у него (по умолчанию!) равна ширине контейнера, в котором он находится: или это body, или это другой div (т.е. родительские контейнеры). Поэтому, если Вы напишете какие-нибудь div-ы, зададите им параметры - границы и высоту (произвольно), Вы увидите прямоугольники на странице, которые спускаются вниз друг за другом, т.к. каждый из них занимает ВСЮ ширину родительского контейнера, пусть им будет body. Блоки тесно прилежат друг к другу, но не сталкиваются, т.к. “видят” друг друга.
2 лайка
И даже если Вы впишете им какое-нибудь содержимое, ширина (ведь Вы не указывали её) сохранится. Но зачем порой такие огромные div-ы, если в них одно слово? Ведь нам нужно на страничке размещать разные блоки текста (или картинок) по-разному друг относительно друга. И просто, как в Word-е, с помощью табуляции и пробелов, не получится: Word - это готовая программная оболочка, в вёрстке же Вы сам творец! И должны компьютеру рассказать, как переместить и расположить эти блоки друг относительно друга. Вот для этого и были придуманы разные способы. И первый, с которым Вас знакомят в курсе, это float (хотя есть и другие, само собой). Так вот, как только Вы зададите любому из блоков это свойство (неважно, правый или левый флоат), их свойства сразу изменятся:
-
Они выпадут из потока: т.е. “обычные” блоки их перестают замечать и занимают их место.
-
У них пропадает ширина по умолчанию и они начинают ужиматься по ширине под своё содержимое (поэтому, если внутри ничего нет, не забудьте задать им какую-нибудь ширину, чтобы их видеть). А раз 1 блок больше не занимает всю ширину body, то другие зафлоаченные блоки будут пристраиваться на одну строку, пока будут помещаться по всей ширине body. Как только перестанут помещаться, просто будут переноситься и формировать новую строку.
-
Зафлоаченные блоки начинают видеть друг друга, но не оставшиеся обычные блоки!! И управлять ими нужно будет через обычные свойства - margin-ы, прежде всего…
Надеюсь, что-то прояснил. Если будет более конкретный вопрос, можно будет рассмотреть и ответить более конкретно.
2 лайка
P.S. На div-ах свет клином не сошёлся, есть масса других блочных элементов, которые будут вести себя точно так же. А кроме body родительским контейнером может быть любой другой блочный элемент. В данном объяснении именно эти 2 элемента использовались для простоты и краткости объяснения. 
1 лайк
Алексей. Спасибо огромное за ответ. На практике не всегда получается. А скорей, всегда не получается так легко.
Я вас еще помучаю более детально потом. Пока еще пройду оставшиеся испытания и Кексби на эту тему. Может само пройдет.
Нет вопросов, пишите. А “не легко” - всё приходит со временем и практикой. Так что не расстраивайтесь ))