CSS clear 속성으로 float 효과 해제하는 방법

CSS의 clear 속성은 float(부동) 처리된 요소 주변에서 흐르는 콘텐츠를 어느 쪽 면에서 제거할지 지정할 때 사용합니다. 즉, 요소가 왼쪽 또는 오른쪽에 떠 있는 다른 요소와 겹치지 않도록 배치를 조절하는 역할을 합니다.

clear 속성의 주요 값

left – 왼쪽에 떠 있는(float: left) 요소 아래로 내려갑니다.
right – 오른쪽에 떠 있는(float: right) 요소 아래로 내려갑니다.
both – 양쪽 모두에 떠 있는 요소를 피해 아래로 이동합니다.
none – 기본값으로, float 요소의 영향을 받지 않습니다.

예제 1: clear: left 활용하기

다음 예제는 CSS clear 속성을 적용한 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
.clear {
    clear: left;
}
.yellow{
    background-color: #FF8A00;
}
.red{
    background-color: #F44336;
}
.green{
    background-color: #4CAF50;
}
p {
    float: left;
    margin: 10px;
    padding: 10px;
    color:white;
}
</style></head>
<body>
<p class="red">Important Notice</p>
<p class="clear red">Important Notice</p>
<p class="yellow">Mediocre Notice</p>
<p class="green">Ignorable Notice</p>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS clear 속성으로 float 효과 해제하는 방법

clear: left가 적용된 두 번째 문단은 왼쪽에 떠 있는 요소가 없는 새로운 줄부터 시작하는 것을 확인할 수 있습니다.

예제 2: clear: both로 양쪽 float 해제하기

이번에는 clear: both를 사용해 왼쪽과 오른쪽의 모든 float 요소를 피해 배치하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
p {
    float: left;
    margin: 10px;
    padding: 10px;
    color:white;
    background-color: #48C9B0;
    border: 4px solid #145A32;
}
p.noneFloat{
    float: none;
    clear: both;
    color: #34495E;
}
</style></head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS clear 속성으로 float 효과 해제하는 방법

noneFloat 클래스가 적용된 문단은 float: none과 clear: both 덕분에 독립적인 한 줄을 차지하게 됩니다. 이처럼 clear 속성을 활용하면 float 레이아웃에서 원하는 위치에 정확히 요소를 배치할 수 있습니다.