Почему float не создает переноса строки?

Question

[Павел]

Читаю: "Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки."

Разбираюсь на пальцах:

<div class="" style="background-color: red;">Первый </div>
	<div class="" style="background-color: green;>Второй </div>
	<div class="" style="background-color: yellow;">Третий </div>

Пока все логично. Каждый блок начинается с новой строки.
Но добавляя float

<div class="" style="background-color: red;">Первый </div>
	<div class="" style="background-color: green; float: right">Второй </div>
	<div class="" style="background-color: yellow;">Третий </div>

второй и третий блоки оказываются на ОДНОЙ строчке.

Почему третий див не отображается с третьей строчки, а "прыгает" на вторую? Почему float внезапно ломает определение блочных элементов, если прямым текстом описано, что "он всегда начинается с новой строки"?

Наверное самый логичный ответ: "потому что это float" - но у меня никак не получается усвоить "как это работает", хотя гуглил и спецификацию дива и флоата.

Answer 1

[Дима Паутов]

Почему float внезапно ломает определение блочных элементов

так потому что он делает обтекание элемента. Сначала почитайте про его свойства. Элемент, которому дали float начитает обтикать предыдущий элемент

Comments

[Павел]

А можете дать ссылку, где написано, что он начинает обтекать именно предыдущий элемент?
Нигде не встретил такой формулировки.
Кроме того, вы пишете предыдущий, но в примере получается как раз - последующий, т.к. в такой поставноке вопроса - второй div залез не на первый наверх, а именно на третий вниз.

[Дима Паутов]

Павел, ссылки у меня нет. Это опыт говорит!!
ну значение right означает следующий, left предыдущий. Я бегло пробежался по примеру

[Дима Паутов]

Павел, float был придуман для того, что бы можно было оптекать элементы. Самый простой и реальный пример - это текст. Когда у вас есть картинка, и вы хотите, что бы текст её обтекал с нужной вам стороны, как вода камень!!! Даёте картинке float:left и текст будет обтекать её по правой стороне, дадите float:right, текст будет по левой тороне обтекать картинку. Верстать на флоатах не нужно. Это было давно раньше, т.к. не было других более менее гибких решений.

[Александр]

Дима Турков, вы считаете уже можно использовать flexbox или grid без опасений? Я просто сам учусь верстке и задаюсь этим вопросом. Недавно нашел серию видеоуроков верстки макета (2016 год), в которой автор решил не использовать flexbox из-за IE 9. Стоит ли сейчас задаваться подобными вопросами поддержки?

[Дима Паутов]

Александр, только flexbox, до гридов ещё рано. Пока есть ie 11 никаких гридов, если только для своих проектов, где вам насрать на таких пользователей. Для реальных проектов, никаких гридов. Только flexbox.

P.S. flexbox в ie9 не работает. Либо вы не правильно поняли автора, либо автор грубо говоря не понимает, о чём говорит.

[Александр]

Дима Турков,

flexbox в ie9 не работает

Так я так и сказал: "автор решил НЕ использовать flexbox из-за IE 9".

[Дима Паутов]

Александр, значит я не правильно прочёл. Но уже никто не поддерживает ie 9. Все уже перешли на 10 и 11

[Александр]

Дима Турков, Спасибо за то, что помогли определиться :)