Почему при float: right блоки меняются местами?

Question

[Yevhenii K]

Добрый день! Почему если задать блокам 3(синий) и 2(красный) float: right, то красный становиться на место синего, а не просто прижимается к нему?
codepen.io/AFI/pen/ZOLmBP

Answer 1

[Александр]

Потому, что смысл флоата такой. Если нескольким блокам дать float:right, то последний в DOM-е блок останется на месте, все же остальные поочередно (последовательно) последуют за ним. Проще сказать: блоки выстраиваются последовательно в обратном порядке.

Answer 2

[semki096]

птому что флоат это не прижимание а обтекание.

Answer 3

[HamSter]

Поменяй их в html, если так принципиально!

<div class="container">
  <div class="block block1"></div>
  
  <div class="block block3"></div>
  <div class="block block2"></div>
</div>

У вас идет block2 (red) перед block3 (blue) потому он и "флоатнее right"!
Почему? - Кто первее - тот и в приоритете!

*пардон за объяснение )

Answer 4

[Vitaliy Jakim]

Вот вам очень интересная ссылка которая много поучительного в себе несет. Всякие возможные варианты решения