как работает float:left, почему блочные элементы переносятся на новую строку или как оставить элемент HTML на той же строке

1. Элемент должен являться блочным чтобы это работало, т.е. когда применено свойство float: left элемент переводится браузером в блочный (display: block)
2. Блочные элементы по-умолчанию начинаются с новой строки. Не достаточно просто сделать элемент блочным, чтобы оставить его на той же строке.
3. Чтобы блочный элемент оставался на той же строке нужно задать предыдущему перед ним элементу CSS стиль float: left .
4. У родителя обоих элементов (их контейнера) должна быть задана ширина width в процентах, пикселях или чем-то еще.
5. Эта ширина не должна быть меньше ширины обоих объектов внутри контейнера, включая их margin, padding, border.

код странички тестирования

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”pxyMaB” default_tab=”html,result” user=”tvs-sm”]See the Pen single line block elements (как сделать блоки (блочные элементы) одной строкой CSS, HTML) by Vladimir Tyuryukov (@tvs-sm) on CodePen.[/codepen_embed]