'float: right'가 인라인 요소의 순서를 바꾸는 이유는 무엇입니까?

Float:right는 스팬 순서를 뒤집습니다: CSS 딜레마

인라인 요소와 플로팅을 처리할 때 예상치 못한 문제가 발생합니다. 브라우저에서 요소가 뒤집힙니다. 이러한 관찰은 일반적으로 float 속성을 현명하게 사용하여 목격됩니다. 문제를 설명하기 위해 특정 상황을 살펴보겠습니다.

다음 HTML 구조를 고려하세요.

<code class="html"><div>
    <span class="label"><a href="/index/1">Bookmix Offline</a></span>
    <span class="button"><a href="/settings/">Settings</a></span>
    <span class="button"><a href="/export_all/">Export</a></span>
    <span class="button"><a href="/import/">Import</a></span>
</div></code>

다음 CSS 규칙을 적용하면 "버튼" 범위를 플로팅하는 것이 목적입니다. 오른쪽:

<code class="css">span.button {
    float:right;
}

span.label {
    margin-left: 30px;
}</code>

그러나 브라우저에서 "버튼" 범위가 실망스럽게 역순으로 렌더링되어 의도한 순서 대신 "내보내기 설정 가져오기"가 예기치 않게 표시됩니다.

CSS 수정: 유연성 수용

이 난처한 문제를 해결하기 위해 CSS는 다양한 접근 방식을 제공합니다. 즉, HTML에서 부동 요소의 순서를 바꾸거나 포함 요소를 도입하고 대신 해당 요소를 띄우십시오. 두 솔루션 모두 기존 HTML 구조를 변경하지 않고도 주문 역전을 효과적으로 해결합니다.

위 내용은 'float: right'가 인라인 요소의 순서를 바꾸는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!