Если у меня есть три элемента flaoted вправо, почему порядок следующий (см. jsfiddle), элемент 1 является первым элементом с правой стороны, когда элемент 3 фактически является последним элементом.
Теперь заказ
[3] [2] [1]
Но элементы находятся в этом порядке в html
[1] [2] [3]
Почему?
Этот "инвертированный заказ" является предполагаемым результатом.
Вы можете копаться в Спецификация CSS, если хотите, но ваш пример отображает как это должно быть.
Если вы хотите, чтобы они отображались в том же порядке, что и разметка, поплавьте .container вправо, его дети останутся.
Первый элемент перемещается вправо, останавливается, когда он попадает на край контейнера и позволяет следующему элементу перемещаться влево.
Затем второй элемент делает то же самое, за исключением того, что он останавливается, когда он попадает в левый край первого элемента.
... и т.д.
Использование float или любого другого свойства css не влияет на исходный код html.
Любой элемент, который следует за плавающим элементом, будет обтекать плавающий элемент с другой стороны.
Если вы поместите изображение влево, любой текст или другие элементы, следующие за ним, будут перемещаться по нему вправо. И если вы плаваете изображение вправо, любой текст или другие элементы, следующие за ним, будут перемещаться по нему влево.
float начинает его анализ с самого правого на большинство слева.
например:
<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>
с этим правилом:
.block {
float: left;
}
block-3 выравнивается влево, мы имеем: block-3, block-1, block-2 block-2 выравнивается влево, мы имеем: block-2, block-3, block-1 block-1 выравнивается влево, мы имеем: block-1, block-2, block-3
с этим правилом:
.block {
float: right;
}
block-3 выравнивается вправо, мы имеем: block-1, block-2, block-3 block-2 выравнивается вправо, мы имеем: block-1, block-3, block-2 block-1 выравнивается вправо, мы имеем: block-3, block-2, block-1
Если вы хотите, чтобы они float:right в правильном порядке: block-1, block-2, block-3
то вы должны поменять их в разметке
<div class="block block-3"></div>
<div class="block block-2"></div>
<div class="block block-1"></div>
UPDATE: Или оберните их все в родительском объекте и только плавайте родительский
Если оба элемента будут плавать в одном направлении (в этом случае - вправо), то первый, который появляется в нашем HTML (а не CSS!), будет на стороне, близкой к краю.
Это связано с тем, что в вашем html вы указали, что [элемент 1] будет отображаться с первой строкой вправо. Следовательно, это именно то, что делает браузер. Когда в вашем html вы продолжаете отображать [элемент 2], плаваете вправо, браузер делает это, НО ПОСЛЕ того, что приоритет [element 1] отображается справа, поскольку [элемент 1] появился первым в вашем HTML.
Надеюсь, что это имеет смысл.