Почему этот встроенный блочный элемент сдвигается вниз?

Ниже приведен мой код, и я хочу понять, что почему #firstDiv выталкивается вниз всеми браузерами. Я действительно хочу понять внутреннюю работу того факта, почему его толкают вниз, а не тянут вверх тем или иным образом. (и я знаю, как выровнять их вершины :))

И я знаю, что это его overflow: hidden, что вызывает это, но не уверен, почему он толкает этот div вниз.

 тело {ширина: 350 пикселей; маржа: 0px авто; } #container {border: 15px сплошной оранжевый; } #firstDiv {border: 10px, сплошной коричневый; дисплей: встроенный блок; ширина: 70 пикселей; переполнение: скрыто; } #secondDiv {border: 10px solid skyblue; плыть налево; ширина: 70 пикселей; } #thirdDiv {дисплей: встроенный блок; граница: сплошная желто-зеленая, размером 5 пикселей; } 
 
ПЕРВЫЙ
ВТОРОЙ
ТРЕТИЙ
еще немного контента
еще немного контента

http://jsfiddle.net/WGCyu/ .

232
задан Temani Afif 22 April 2019 в 00:16
поделиться