HTML float right 요소 순서

HTML float right 요소 순서

---

오른쪽에 세 개의 요소가있는 경우 순서가 다음 요소 (jsfiddle 참조)를 따르는 이유는 요소 3이 실제로 마지막 요소 인 경우 요소 1이 오른쪽의 첫 번째 요소입니다.

주문은 지금

[3] [2] [1]

그러나 요소는 html에서이 순서로되어 있습니다.

[1] [2] [3]

왜?

http://jsfiddle.net/A9Ap7/

---

그 '역 순서'가 의도 된 결과입니다.

원하는 경우 CSS 사양 을 살펴볼 수 있지만 예제는 적절하게 렌더링됩니다.

마크 업과 같은 순서로 표시하려면 .container오른쪽을 플로팅 하고 자식은 왼쪽으로 플로팅합니다 .

jsfiddle 업데이트

---

첫 번째 요소는 오른쪽으로 이동하고 컨테이너의 가장자리에 닿으면 중지되며 다음 요소가 왼쪽으로 이동할 수 있습니다.

두 번째 요소는 첫 번째 요소의 왼쪽 가장자리에 닿을 때 중지된다는 점을 제외하면 동일한 작업을 수행합니다.

… 등등.

---

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>

업데이트 : 또는 모두 부모로 감싸고 부동 부모 만

---

float 또는 기타 css 속성을 사용하면 html 소스 코드에 영향을주지 않습니다.

부동 요소를 따르는 모든 요소는 다른 쪽의 부동 요소 주위로 흐릅니다.

이미지를 왼쪽으로 띄우면 그 뒤의 모든 텍스트 또는 기타 요소가 이미지 주위로 오른쪽으로 흐릅니다. 이미지를 오른쪽으로 띄우면 그 뒤의 모든 텍스트 또는 기타 요소가 이미지 주위를 왼쪽으로 흐릅니다.

---

두 요소가 같은 방향 (이 경우 오른쪽)으로 플로팅되도록 설정하면 HTML에 나타나는 첫 번째 요소 (CSS가 아님)는 가장자리에 가까운 먼쪽에있는 요소입니다.

---

이는 html에서 [요소 1]이 먼저 오른쪽에 정렬되도록 지정했기 때문입니다. 따라서 이것이 바로 브라우저가 렌더링하는 것입니다. HTML에서 [요소 2]를 오른쪽으로 플로팅하여 표시 할 때 브라우저는이 작업을 수행하지만 HTML에서 [요소 1]이 먼저 왔기 때문에 오른쪽에 표시되는 [요소 1] 우선 순위를 부여한 후에 브라우저가이를 수행합니다.

이것이 의미가 있기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/8287265/html-float-right-element-order