Тема сетки, свойство FLOAT - вопрос по взаимодействию с блочными.

Понятно, что после того как элемент зафлоачен, блочные элементы, расположенные ниже его, перестают его замечать и поднимаются на его место. Но. Заметил, что если зафлоаченный элемент расположен вверху страницы, то нижеследующие за ним блочные элементы не поднимаются на всю его высоту, т.е. он остается немного выступать выше поднявшихся на его место блочных. И происходит это именно с верхними на странице флоатами. Почему так происходит, как учитывать эту особенность и поддается ли это “выступание” расчету?

http://cssdeck.com/labs/full/khhdze8c вот так получается если обнулись отступы, т.е нету никакой лесенки
Хотя и со строчными никакого отступы нету http://cssdeck.com/labs/full/khhdze8c

а нет подожди я наврал тебе, я там сам отступы в 10px задавал потом обнулил его же:joy:, если блочный рядом с блочным то никакого сдвига нету. Может ты имел ввиду про сдвиг рядом со строчным элементом?

Та не, вот например так. Может это из-за паддинга 10 пикс у block? Этот паддинг отталкивает что-ли накладывающийся нижний блок на эти 10пикс вниз? Получается что флоаты с отступами ведут себя так хитро? Маржин тоже будет так работать?

Да да я вас понял. Разобрался с вашим вопросом, это происходит из за отступов по видимому стандартных у тега абзаца, если ему задать margin:0; то сразу все вровень будет, попробуйте в своем редакторе написать с нуля подобный код и увидите что такого не будет.

3 лайка

+ Помогите разобраться

2 лайка

в точку)

Большое спасибо за объяснение, теперь ситуация прояснилась:slight_smile:

Пока одолел ветку по ссылке, понял что пора в холодный душ. :joy:Не подумал бы что это такой закрученный вопрос…

1 лайк

Кстати, еще немного по этому вопросу. Пытаясь одолеть вчера ветку по приведенной выше Инесской ссылке, понял, что такого полета мысли мне полностью не осилить. Сделав паузу и поразмыслив, приведу свой вариант понимания этого явления. Кстати, вполне возможно что на самом деле по сути он и совпадает с объяснением по ссылке и америки я не открыл.
Итак. У абзаца действительно есть отступ, заданный по умолчанию. В данном случае интерес представляет отступ сверху, который отсчитывается относительно верхней границы родительского контейнера. Какой он точно не знаю. При этом Алексея, автора ветки по ссылке, смущал тот факт, что если убрать этот отступ с помощью обнуления верхнего паддинга родительского контейнера, то все играет и пресловутой ступеньки нет, но стоит задать этому паддингу величину хоть 1 пикс., а также 2, 3 или 5 как ступенька вновь возвращалась к своему первоначальному виду, причем совершенно одинаково. Дальше я его рассуждения осилить, увы, не смог. Однако подумал, что возможно на самом деле определяющим для ступеньки является не паддинг родительского контейнера, а верхний марджин абзаца. Так оно и оказалось, он легко меняет или убирает ступеньку. Но вместе с тем обнаружился один интересный факт. При условии что верхний марджин абзаца мы не трогаем, то есть он действует заданный по умолчанию, либо задаем его явно какой-то конкретной величины, то верхний паддинг родительского контейнера работает как его “выключатель”. То есть, если этот паддинг нулевой - верхний марджин абзаца также “выключается”. Абзац подпрыгивает к верхней границе контейнера и прилипает к ней. У зафлоаченного блока заданных внешних отступов нет и поэтому он также уже прилип к верху контейнера. И ступенька пропадает. А вот если верхний паддинг родителя любой величины больше нуля, то марджин абзаца “включен” на заданную ему величину ( явно или по умолчанию) и ступенка есть ровно на величину марджина абзаца независимо от паддинга контейнера. Паддинг контейнера при этом работает как и должен работать, синхронно отодвигая все его содержимое от верхней границы контейнера вниз на заданное число пикселей. Как то так. Знаю, что слишком “рассусолил”. Но очень хотел высказать мысли “понимабельно” :joy::joy:

Это просто особенность браузеров в каждом браузере эти отступы равны разным величинам, и их просто нужно обнулить, в браузерах заданым по умолчанию они у строчных элементов. Вы же должны были это прочитать в статье. Там нету никакой теории насколько я знаю😂

Да я не спорю. Просто попытка понять содержимое ветки которую упомянула Инесска и привела к всему этому слово и мозгоблудию :joy: Если честно, то я не одолел обьяснение автора.:joy: