Использование float. Куда пропал блок?

Question

[webrapist]

Добрый день.

Начал разбираться с позиционированием, в частности с float.

https://jsfiddle.net/webrapist/6mponmp3/1/

Где второй box? Почему его не видно? И третий box не понятно почему расположен ниже, хотя они все могут уместиться на одной строке.

Answer 1

[ch3rry]

Зачем, если есть flexbox?

Comments

[DTX]

Флекс - классная штука, но если можно обойтись без него, то лучше так и поступить, т.к. флекс работает чуть медленнее.

[Владислав Хвостов]

flexbox, не поддерживается старыми браузерами.

[ch3rry]

Владислав Хвостов: чем раньше закончат оптимизировать под старье, тем быстрее новые технологии войдут в обиход (имхо)

[Владислав Хвостов]

ch3rry: Только если ты пишешь продукт для большой аудитории и не оптимизируешь под "старье", твой работодатель может потерять несколько миллионов рублей или долларов, и за это тебя точно по головке не погладят.

Answer 2

[Владислав Хвостов]

Второй перекрывает первый, так как "флоаченые" выпадают из потока вывода.

Третий уехал т.к. второй элемент блочный (display: block) и занимает всю ширину. (Первый как мы помним выпал из потока, если бы не выпал то тоже бы выталкивал)

display: inline-block; для всех трех блоков должен исправить положение.

https://jsfiddle.net/ekhjrpr6/

Comments

[webrapist]

Хорошее объяснение. Уточните, пожалуйста, некоторые моменты.

1) Почему второй перекрывает первый, если я вижу цвет первого блока?

2) Собственно, почему что-то меняется с первыми двумя блоками при использовании display: inline-block? Если первый box всё так же вне потока, почему не происходит того же самого перекрытия?

По моей логике, должно было бы быть так:

Первый, тот что со свойством float: left - всё там же на месте. Опять же идёт перекрытие. А вот третий box вполне бы влез к ним на строку, т.к. теперь они все инлайновые.

Answer 3

[Кирилл Пензин]

box1 и box2 наложились друг на друга. Чтобы избежать наложения и расместить div-ы в одной строке, пропишите им свойство display: inline-block;
https://jsfiddle.net/6mponmp3/2/

Answer 4

[DTX]

Второй бокс за первым. Третий расположен ниже второго, т.к. у второго не указан флота и он занимает всё ширину. Если второму боксу назначить float: left, то всё будет ровно.
https://jsfiddle.net/6mponmp3/3/

Answer 5

[zooks]

Так назначьте на него рамку и какой-нибудь float. Сразу увидите.
А вообще такие вещи лучше делать через Flex.

Answer 6

[0leg5ergeev]

https://jsfiddle.net/6mponmp3/4/

научитесь пользоваться инструментами разрабочика

Comments

[webrapist]

О чем конкретно речь? Что можно было извлечь оттуда в данной ситуации?

[0leg5ergeev]

webrapist: в вашем примере можно понять где же находится потерянный вами элемент и почему это произошло