CSS clear 속성을 사용한 플로팅 취소

이러한 문제를 해결하기 위해 플로팅을 취소하는 특별한 속성 clear가 있습니다. 값 left는 왼쪽 플로팅을, 값 right는 오른쪽 플로팅을, 그리고 값 both는 양쪽 플로팅을 취소합니다. 이 값이 가장 자주 사용됩니다.

즉, clear 속성은 플로팅을 취소합니다. 우리의 경우, 이것은 첫 번째 div의 플로팅 이미지가 두 번째 div를 침범하지 않도록 할 수 있습니다.

이때 clear는 플로팅 요소들이 침범하지 않아야 할 요소에 주어져야 합니다. 즉, 우리의 경우 두 번째 div에 주어야 합니다.

이제 해봅시다 - 두 번째 div에 parent 클래스 외에 clearfix 클래스를 추가하고 이 새로운 클래스에 both 값을 가진 clear 속성을 설정하면 이미지 침범이 사라질 것입니다:

html<div class="parent">
  <img src="img.png" alt="">
  text
</div>
<div class="parent clearfix">
  text
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат:

clearfix라는 이름은 일반적으로 통용되므로, 앞으로는 이것을 사용하세요.