CSS clear 속성 – 요소가 float 옆에 배치되지 않도록 제어

정의 및 사용 방법

clear 속성은 요소 박스의 어느 측면이
이전에 있는 float 요소 옆에 배치(adjacent)되지 않도록(clear) 할지 지정합니다.

다음은 float 요소에 대한 간단한 부연설명입니다.

float 요소: float 속성으로 설정된 값이 none이 아닌, 즉 left, right, inline-start, inline-end 값 중에서 하나일 경우 해당 요소는 문서의 일반적인 흐름에서 벗어나게 됩니다(하지만 여전히 문서의 일부로 남아 있습니다). 이러한 요소를 float 요소라고 합니다. float 요소는 왼쪽이나 오른쪽으로 이동하여, 그 요소가 포함된 컨테이너의 가장자리에 닿거나, 다른 float 요소와 닿을 때까지 위치가 조정됩니다.

특징

블록 레벨 요소에 적용 가능합니다.
이전에 있는 float 요소 옆에 있는 요소에 적용하며, 이후에 있는 float 요소에는 영향이 없습니다.
이 속성으로 인해 해당 요소가 float 요소 옆에 배치되지 않으면, 시각적으로 float 요소의 아래쪽 경계선(bottom edge)보다 아래로 내려갑니다.

블록 레벨(block-level) 요소: 문서 흐름 맥락에서 새로운 블록(영역) 상자 수준의 레이아웃을 형성하는 요소를 말합니다. 다른 표현으로 '블록 요소'라고도 부릅니다.
일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈시키고, 컨테이너 영역을 정의(너비와 높이를 지정)할 수 있습니다.
<div>, <p> 등이 있습니다. <span>과 같은 인라인 레벨(Inline-level) 요소는 한 줄 내에서 다른 요소와 함께 배치되므로 clear를 적용할 수 없습니다.

형식 구문

값

clear 속성의 값과 의미
`none`	초깃값. 요소 박스가 이전에 있는 `float` 요소 옆에 배치되지 않도록 제한하지 않습니다.
`left`	요소 박스의 측면이 이전에 있는 `float` 값이 `left`인 요소 옆에 배치되지 않도록 하며, 해당 요소는 그 `float` 요소의 아래쪽 경계선(bottom edge)보다 아래에 배치됩니다.
`right`	요소 박스의 측면이 이전에 있는 `float` 값이 `right`인 요소 옆에 배치되지 않도록 하며, 해당 요소는 그 `float` 요소의 아래쪽 경계선(bottom edge)보다 아래에 배치됩니다.
`inline-start`	요소 박스의 측면이 이전에 있는 `float` 요소가 포함된 컨테이너 박스의 텍스트를 포함한 인라인 콘텐츠의 진행 방향의 '시작쪽' 옆에 배치되지 않도록 합니다. 예를 들어 텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 '시작쪽'은 '왼쪽'입니다. 반면에 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 '시작쪽'은 '오른쪽'입니다. 해당 요소는 그 `float` 요소의 아래쪽 경계선(bottom edge)보다 아래에 배치됩니다.
`inline-end`	요소 박스의 측면이 이전에 있는 `float` 요소가 포함된 컨테이너 박스의 텍스트를 포함한 인라인 콘텐츠의 진행 방향의 '끝쪽' 옆에 배치되지 않도록 합니다. 예를 들어 텍스트 방향이 LTR(Left-to-Right, 예: 영어, 한국어 등)인 경우 '끝쪽'은 '오른쪽'입니다. 반면에 텍스트 방향이 RTL(Right-to-Left, 예: 아랍어, 히브리어 등)인 경우 '끝쪽'은 '왼쪽'입니다. 해당 요소는 그 `float` 요소의 아래쪽 경계선(bottom edge)보다 아래에 배치됩니다.
`both`	요소 박스의 측면이 이전에 있는 `float` 요소의 양쪽(왼쪽과 오른쪽) 옆에 모두 배치되지 않도록 하며, 해당 요소는 그 `float` 요소의 아래쪽 경계선(bottom edge)보다 아래에 배치됩니다.

기본 예제

다음 예제들에서는 clear 속성의 값별로 실제 적용된 모습을 라이브 데모로 구현했습니다.

`float` 값이 `left`인 요소

.clear-target 요소 앞에는 float 값이 left인 요소가 있습니다.
.clear-target인 요소에 clear 속성의 값별로 실제 적용된 모습을 라이브 데모로 살펴보세요.

HTML

<section class="container">
    <div class="float-left">Float left</div>
    <p class="clear-target">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat.....
    </p>
</section>

CSS

.float-left {
    float: left; /* float 값이 left인 요소 */
    background-color: black;
    color: white;
}
.clear-target {
    color: silver;
    clear: /*  clear 속성의 값별로 실제 적용된 모습을 라이브 데모로 구현 */
}

라이브 데모: 실제 적용된 모습 데모 버튼을 클릭해 보세요!

Float left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

라이브 데모 예제를 살펴보면 .clear-target인 요소가
clear: left;, clear: inline-start;, clear: both;일때 float 값이 left인 요소 옆에 배치되지 않도록 하며, .clear-target은 그 float 요소의 아래쪽 경계선(bottom edge)보다 아래에 배치됩니다.

`float` 값이 `right`인 요소

.clear-target 요소 앞에는 float 값이 right인 요소가 있습니다.
.clear-target인 요소에 clear 속성의 값별로 실제 적용된 모습을 라이브 데모로 살펴보세요.

HTML

<section class="container">
    <div class="float-right">Float right</div>
    <p class="clear-target">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat.....
    </p>
</section>

CSS

.float-right {
    float: right; /* float 값이 right인 요소 */
    background-color: black;
    color: white;
}
.clear-target {
    color: silver;
    clear: /*  clear 속성의 값별로 실제 적용된 모습을 라이브 데모로 구현 */
}

라이브 데모: 실제 적용된 모습 데모 버튼을 클릭해 보세요!

Float right

라이브 데모 예제를 살펴보면 .clear-target인 요소가
clear: right;, clear: inline-end;, clear: both;일때 float 값이 right인 요소 옆에 배치되지 않도록 하며, .clear-target은 그 float 요소의 아래쪽 경계선(bottom edge)보다 아래에 배치됩니다.

구문

CSS

/* 키워드 값 */
clear: none;
clear: left;
clear: right;
clear: inline-start;
clear: inline-end;
clear: both;

/* 글로벌 값 */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;