CSS clear, clearfix 속성

CSS clear 속성

float 속성을 사용하고 아래의 다음 요소(오른쪽 또는 왼쪽이 아닌)를 원할 때는 clear 속성을 사용해야 한다.

clear 속성은 플로팅 요소 옆에 있는 요소에서 발생할 작업을 지정한다.

clear 속성은 다음 값 중 하나를 가질 수 있다:

none - 요소가 왼쪽 또는 오른쪽 플로팅 요소 아래로 밀리지 않는다. 기본값이다
left - 요소가 왼쪽 플로팅 요소 아래로 푸시된다
right - 요소가 오른쪽 플로팅 요소 아래로 푸시된다
both - 요소가 왼쪽 및 오른쪽 플로팅 요소 아래로 밀려난다
inherit - 요소는 부모로부터 명확한 값을 상속한다

float를 지울 때는 clear를 float에 일치시켜야 한다. 요소가 왼쪽으로 float된 경우 왼쪽으로 clear해야 합니다. float 된 요소는 계속 float 되지만 웹 페이지에서 clear 된 요소는 그 아래에 표시된다.

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - HTML 코드에서 div2는 div1 뒤에 있습니다. 그러나 div1이 왼쪽으로 뜨기 때문에 div2의 텍스트는 div1을 중심으로 흐릅니다.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - 여기서 클리어: 왼쪽; div4를 플로팅 div3 아래로 이동합니다. "왼쪽" 값은 왼쪽으로 플로팅된 요소를 지웁니다. "오른쪽"과 "둘 다"를 지울 수도 있습니다.</div>

</body>
</html>

div1과 div2 요소는 clear가 없는 상황 가운데 div1이 왼쪽에 float으로 배치되어 div2 영역에 배치됨을 알 수 있다.

div3는 float:left로 배치하였는데 만일 div4를 아래에 배치하고 싶으면 div4에 clear:left를 설정하며 아래 그림과 같이 결과를 확인할 수 있다.

CSS clearfix 속성

float 요소가 컨테이너 요소보다 높으면, 컨테이너 외부에서 "오버플로우"된다. 그런 다음 이 문제를 해결하기 위해 명확한 수정 해킹을 추가할 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>이 이미지는 오른쪽으로 이동합니다. 또한 이미지를 포함하는 요소보다 크기 때문에 컨테이너 외부에 넘칩니다:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  중앙아메리카와 남아메리카 북부 원산으로 그곳에서는 오래 전부터 재배했고, 포르투갈, 스페인을 통해 세계 각지에 퍼졌다. 루이 14세가 껍질도 안 벗기고 손으로 집어먹었다가 혀를 다쳐 분노한 나머지 이 과일을 먹는 것을 금지하기도 했다.
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>오버플로우가 있는 클리어픽스 클래스: auto;를 포함하는 요소에 추가하여 수정할 수 있습니다:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  중앙아메리카와 남아메리카 북부 원산으로 그곳에서는 오래 전부터 재배했고, 포르투갈, 스페인을 통해 세계 각지에 퍼졌다. 루이 14세가 껍질도 안 벗기고 손으로 집어먹었다가 혀를 다쳐 분노한 나머지 이 과일을 먹는 것을 금지하기도 했다.
</div>

</body>
</html>

이미지가 컨테이너보다 커서 넘칠 경우에 clearfix를 사용하지 않으면 첫번째 그림과 같이 출력이 되고 clearfix를 활용하면 div요소의 높이가 그림 높이로 조절이 되어 출력이 된다. 위의 코드를 실행한 결과 화면은 아래 그림과 같다.

overflow: auto clearfix는 마진과 패딩을 제어할 수 있는 한 잘 작동한다(다른 경우 스크롤 막대가 표시될 수 있음). 그러나 최신 클리어픽스 해킹은 사용하기에 더 안전하며 대부분의 웹 페이지에서 다음 코드가 사용된다:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>이 이미지는 오른쪽으로 이동합니다. 또한 이미지를 포함하는 요소보다 크기 때문에 컨테이너 외부에 넘칩니다:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  중앙아메리카와 남아메리카 북부 원산으로 그곳에서는 오래 전부터 재배했고, 포르투갈, 스페인을 통해 세계 각지에 퍼졌다. 루이 14세가 껍질도 안 벗기고 손으로 집어먹었다가 혀를 다쳐 분노한 나머지 이 과일을 먹는 것을 금지하기도 했다.
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>오버플로우가 있는 클리어픽스 클래스: auto;를 포함하는 요소에 추가하여 수정할 수 있습니다:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  중앙아메리카와 남아메리카 북부 원산으로 그곳에서는 오래 전부터 재배했고, 포르투갈, 스페인을 통해 세계 각지에 퍼졌다. 루이 14세가 껍질도 안 벗기고 손으로 집어먹었다가 혀를 다쳐 분노한 나머지 이 과일을 먹는 것을 금지하기도 했다.
</div>

</body>
</html>

최근에는 clearfix::after를 활용하여 div 요소에 오버플로우된 그림을 배치할 수 있다. 위의 코드 결과는 아래 그림과 같다.

지금까지 float을 해제하는 clear와 clearfix 속성에 대해서 알아보았다.

눈으로 보지말고, 손으로 눈으로 머리로 익히며 꼭 실습하기를 바란다.

모두 화이팅입니다.!!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 수평, 수직 정렬 (0)	2023.08.27
CSS float 예제 (0)	2023.08.25
CSS float와 clear (0)	2023.08.23
CSS overflow 속성 (0)	2023.08.22
CSS z-index 속성 (0)	2023.08.21