Float:right를 사용하여 범위 순서 반전

제공된 HTML에서 '버튼' 클래스가 있는 범위는 'float: right'로 스타일 지정됩니다. ," HTML 구조와 반대 순서로 표시됩니다. HTML 순서를 유지하도록 CSS를 수정할 수 있습니까?

이 문제를 해결하려면 CSS를 사용하여 위치 지정을 조작하는 두 가지 일반적인 솔루션이 있습니다.

옵션 1: HTML 순서 역순

span 요소를 직접 부동화하는 대신 포함 요소로 감싸서 오른쪽으로 부동화합니다. 예를 들면:

    Settings
    Export
    Import


#buttons {
    float: right;
}

이 경우 'float: right' 속성이 있는 '버튼' div가 버튼 범위를 포함하므로 버튼이 올바른 순서로 표시될 수 있습니다.

옵션 2: HTML 순서 유지

현재 HTML 순서를 유지하는 것이 중요하다면 CSS 규칙을 추가하여 부동 범위의 순서를 명시적으로 지정하세요. 부동 요소의 흐름을 중단하고 원래 HTML 순서로 표시되도록 하려면 "clear" 속성을 사용하십시오.

span.button {
    float: right;
    clear: right;
}

"clear: right" 속성은 다음 요소가 부동 범위 아래에서 시작되도록 보장하여 오른쪽 정렬을 수용하면서 HTML 순서를 효과적으로 유지합니다.