Почему третий div не слушается свойства float?

Question

[muhasa]

Пытаюсь разобраться с float

Выстроил 4 элемента подряд. Первым двум элементам задал float: left;, но третий div не хочет обтекать элемент, а сваливается на следующую строку.

Может кто объяснить такое поведение?.. Почему третий элемент не остался на той же строке, как бы обтекая второй элемент справа?

Вот ссылка - https://jsfiddle.net/p7f6dboq/

Comments

[pavel null]

добавь третьему float: left; он и обтечет =)

[Сергей delphinpro]

https://jsfiddle.net/p7f6dboq/3/
https://jsfiddle.net/p7f6dboq/4/

Answer 1

[Edward]

div по умолчанию занимает всю доступную ширину, даже если вы задали ему ширину, следующий div будет на следующей строке. Задайте всем блокам float: left или сделайте их display: inline-block.

Answer 2

[Ростислав Игнатенко]

Почему не работает - вам уже сказали. Но хочу вам посоветовать эти float, они уже не так актуальны, намного удобнее использовать flex

Answer 3

[Lynn «Кофеман»]

Он обтекает https://jsfiddle.net/p7f6dboq/5/
посмотрите на тень над 1 и 2

Вы задали третьему блоку ширину 40px и его ширины не хватило что бы строка 3 встала рядом с флоатами, поэтому она перенеслась ниже. Это даже описано в стандарте https://www.w3.org/TR/CSS22/visuren.html#bfc-next-...