[css] CSS clear를 사용하여 부모 요소 안에 자식 요소를 정렬하는 방법은?

예를 들어, 부모 요소에 float 된 자식 요소가 있는 경우 해당 자식 요소를 지우고 다음 요소가 float 된 자식 요소 아래에 나타나도록 할 수 있습니다.

아래는 clear 속성을 사용하여 부모 요소 안에 자식 요소를 정렬하는 방법을 보여주는 간단한 예제입니다.

.parent {
  border: 1px solid #000;
  padding: 20px;
}

.child {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

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

위의 코드 예제에서, clearfix 클래스를 가진 가상 요소를 사용하여 부모 요소에 clear를 적용합니다. 이를 통해 float가 적용된 자식 요소들의 영향을 받지 않고 다음 요소를 정렬할 수 있습니다.

이것은 부모 요소 안에 float가 적용된 자식 요소를 가지고 있는 경우에 유용하게 사용될 수 있습니다.

더 자세한 내용은 MDN 웹 문서에서 확인할 수 있습니다: CSS Clear