Как работает высота элемента в блоке

Цитата:

очему элементу прижимаются к низ а не начинаются с верхнего левого угла

Тебе кажется. Он начинается с левого верхнего угла. Смотри разметку и маржины.

Цитата:

И почему так расположился текст в третьем примере

Потому что текст был слишком длинным чтобы влезть в одну строку, и несколько слов перешло на следующую. Теперь представь что в твое предложение написано шрифтом 16 пикселов, а одно слово 72 пикселя. Это слово займет больше места чем весь остальной текст и увеличит строку по высоте. Тоже самое происходит с картинкой, поскольку картинка по умолчанию это строчный элемент.