[CSS] 7. float와 clear

CSS float는 웹 페이지 레이아웃에서 요소를 좌측 또는 우측으로 배치하여 텍스트나 다른 요소들이 그 주위를 흐르게 할 수 있는 속성입니다. 원래 텍스트와 이미지 레이아웃을 조정하기 위해 도입되었지만, 오늘날 float는 다양한 레이아웃 스타일링에 많이 사용됩니다. 이와 함께 clear 속성은 float된 요소 주위에 어떻게 정렬될지 제어하는 데 사용됩니다.

1. float 속성

float 속성은 요소를 왼쪽(left) 또는 오른쪽(right)으로 배치하고, 나머지 콘텐츠가 그 주위를 감싸도록 만듭니다. 기본적으로 블록 요소는 페이지 전체 너비를 차지하지만, float를 적용하면 요소가 페이지의 한쪽으로 정렬되고 나머지 콘텐츠는 그 요소 주변을 감쌉니다.

float 속성 값

• left: 요소를 왼쪽으로 배치
• right: 요소를 오른쪽으로 배치
• none: 요소를 기본 흐름에 따름 (기본값)

예시

.image {
  float: left;
  width: 200px;
  margin-right: 20px;
}

HTML:

<div>
  <img src="image.jpg" class="image" alt="이미지 설명">
  <p>이 텍스트는 이미지 왼쪽에 배치되며, 이미지를 감싸 흐릅니다. float를 사용하여 이미지가 텍스트 왼쪽에 위치하게 했습니다.</p>
</div>

위 코드에서 이미지는 float: left; 속성을 사용해 왼쪽으로 정렬되고, 텍스트는 이미지 주위를 흐르도록 설정됩니다.

2. clear 속성

clear 속성은 float된 요소가 있을 때 그 요소의 양쪽이나 특정 방향에서 떠다니지 않도록 합니다. clear는 주로 float된 요소 아래에 있는 다음 요소가 제대로 표시되도록 할 때 사용됩니다. 이는 종종 레이아웃 문제를 해결하는 데 필수적입니다.

clear 속성 값

• left: 왼쪽의 float된 요소를 피함
• right: 오른쪽의 float된 요소를 피함
• both: 왼쪽과 오른쪽 모두의 float된 요소를 피함
• none: clear 효과를 적용하지 않음 (기본값)

예시

.float-box {
  float: left;
  width: 200px;
  height: 150px;
  background-color: lightblue;
  margin-right: 20px;
}

.clear-box {
  clear: both;
  background-color: lightgreen;
  padding: 20px;
}

HTML:

<div class="float-box">float된 박스</div>
<div class="float-box">float된 박스</div>
<div class="clear-box">clear를 적용한 박스. 이 박스는 float된 박스 아래에 정렬됩니다.</div>

위 예시에서, 두 개의 float-box는 float: left로 설정되어 서로 왼쪽에 정렬되며, 그 다음의 clear-box는 clear: both로 설정되어 두 개의 float된 요소 아래에 배치됩니다.

3. float와 clear의 실전 사용

float와 clear는 과거에 웹 레이아웃을 구현하는 데 많이 사용되었지만, Flexbox나 Grid와 같은 최신 CSS 레이아웃 기술의 등장으로 그 사용 빈도는 줄어들었습니다. 그러나 여전히 특정 상황에서 유용할 수 있습니다. 예를 들어, 이미지와 텍스트를 나란히 배치할 때나 간단한 레이아웃을 구현할 때는 float가 빠르고 유용한 방법이 될 수 있습니다.

float로 레이아웃 구성 예시

.sidebar {
  float: left;
  width: 30%;
  background-color: #f0f0f0;
  padding: 20px;
}

.content {
  float: right;
  width: 65%;
  background-color: #ffffff;
  padding: 20px;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

HTML:

<div class="clearfix">
  <div class="sidebar">사이드바 내용</div>
  <div class="content">메인 콘텐츠 내용</div>
</div>

위 코드에서 sidebar는 왼쪽에, content는 오른쪽에 배치됩니다. clearfix 클래스를 사용하여 float된 두 요소 아래에 콘텐츠가 잘리지 않도록 하고 있습니다.

4. clearfix 해법

float를 사용할 때 부모 요소가 제대로 높이를 가지지 못하는 문제가 발생할 수 있습니다. 이를 해결하기 위해 clearfix 기법을 사용합니다. clearfix는 float된 자식 요소를 가진 부모 요소가 높이를 자동으로 감지하고 그에 맞춰 조정되도록 만듭니다.

clearfix 예시

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

HTML:

<div class="clearfix">
  <div class="float-box">float된 박스</div>
  <div class="float-box">float된 박스</div>
</div>

이 코드에서 clearfix는 부모 요소의 높이를 정상적으로 유지시키는 역할을 합니다.

참고 사이트

• developer.mozilla.org
• www.w3.org
• www.css-tricks.com