[css] CSS clear를 사용하여 요소의 위치를 정렬하는 방법은?

26 Dec 2023

예를 들어, 다음과 같이 HTML과 CSS를 사용하여 clear 속성을 적용할 수 있습니다.

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

.left {
  float: left;
  width: 50%;
  height: 200px;
  background-color: red;
}

.right {
  float: right;
  width: 50%;
  height: 200px;
  background-color: blue;
}

.clear {
  clear: both;
}

위의 예제에서, clear 클래스를 가진 요소는 left와 right 클래스를 가진 float된 요소들의 아래에 위치하도록 합니다.

더 자세한 내용은 MDN 웹 문서의 CSS clear를 참조하세요.