[CSS] clear

iamhyunji·2022년 6월 9일

CSS front end

🔍 들어가기 전에

지난 시간에 CSS - float에 대해 배웠다.
오늘은 float와 관련된 css 속성인 clear에 대해서 배워보고자 한다.

📌 clear

float가 적용된 요소의 다음 요소의 흐름을 제어
float 값에 따라 clear 값 설정해야 float 요소의 다음 요소 제어 가능
float 속성값에 영향 받음

조금 더 풀어 얘기하면, float가 적용된 요소의 다음 요소가 float의 영향을 받아 배치될지, 아니면 float의 영향에서 해제(clear)되어 배치될지를 제어하는 것이 clear 속성의 역할이다.

💡 요소 (element)

Document 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스

공통 메서드와 속성만 가지고 있음

예시 : <h1>제목입니다</h1>

📌 구문

floatElement {
  float: left;
}

elementName,
.className,
#idName {
  clear : none;
  clear : left;
  clear : right;
  clear : both;
  clear : initial;
  clear : inherit;
}

none
left
right
both
initial
inherit

clear 속성의 값으로는 총 6가지가 있다.
각 값에 대한 예제와 결과값은 아래에서 자세히 알아보고자 한다.

none

기본값
float의 다음 요소가 해제를 하지 않음
float의 영향 그대로 받음
예제

<!DOCTYPE html>
<html>
  <head>
    <style>
    .float {
		float: left;
    }

    .clear {
		clear: none;
    }
    </style>
  </head>
  <body>
    <h1>The clear Property</h1>
    <img class="float" src="https://i.pinimg.com/550x/b6/2b/56/b62b56a78f93ce5be9e68b291e45a8d8.jpg">
    <p class="clear">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
  </body>
</html>

결과

left

왼쪽으로 float된 요소 밑으로 요소가 밀려짐
예제

<!DOCTYPE html>
<html>
  <head>
    <style>
    .float {
		float: left;
    }

    .clear {
		clear: left;
    }
    </style>
  </head>
  <body>
    <h1>The clear Property</h1>
    <img class="float" src="https://i.pinimg.com/550x/b6/2b/56/b62b56a78f93ce5be9e68b291e45a8d8.jpg">
    <p class="clear">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
  </body>
</html>

결과

float가 left로 지정되었기 때문에 clear도 left로 지정했다.
만약 float가 right인 상태이고, clear를 left로 지정되면, 화면에서는 float의 다음 요소를 제어하지 못 한다.
그렇기 때문에 clear:both를 사용할게 아니라면, clear는 float의 속성값에 영향을 받는다.

right

오른쪽으로 float된 요소 밑으로 요소가 밀려짐
예제

<!DOCTYPE html>
<html>
  <head>
    <style>
    .float {
		float: right;
    }

    .clear {
		clear: right;
    }
    </style>
  </head>
  <body>
    <h1>The clear Property</h1>
    <img class="float" src="https://i.pinimg.com/550x/b6/2b/56/b62b56a78f93ce5be9e68b291e45a8d8.jpg">
    <p class="clear">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
  </body>
</html>

결과

float가 right로 지정되었기 때문에 clear도 right로 지정했다.
만약 float가 left인 상태이고, clear를 right로 지정되면, 화면에서는 float의 다음 요소를 제어하지 못 한다.
그렇기 때문에 clear:both를 사용할게 아니라면, clear는 float의 속성값에 영향을 받는다.

both

왼쪽 또는 오른쪽으로 float 요소 밑으로 밀려짐
왼쪽과 오른쪽 모두 float 요소가 있다면 height가 더 높은 요소 밑으로 밀림
예제

<!DOCTYPE html>
<html>
  <head>
    <style>
    .float-left {
		float: left;
    }
      
    .float-right {
		float: right;
    }

    .clear {
		clear: both;
    }
    </style>
  </head>
  <body>
    <h1>The clear Property</h1>
    <img class="float-left" src="https://i.pinimg.com/550x/b6/2b/56/b62b56a78f93ce5be9e68b291e45a8d8.jpg">
    <img class="float-right" src="https://i.pinimg.com/550x/b6/2b/56/b62b56a78f93ce5be9e68b291e45a8d8.jpg" width="200" height="300">
    <p class="clear">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
  </body>
</html>

결과

float가 여러개 지정되어 있고, clear:both를 하면, height가 가장 큰 float에 밑으로 다음 요소가 배치된다.

🔗 참고·출처

👀 스스로 피드백

지원 브라우저 정보도 함께 포스팅되면 좋을 것 같음

iamhyunji

Lv0. 웹 개발 (❤️❤️❤️🤍)

이전 포스트