CSS clear 속성은 부모 요소 내에서 부동 요소의 배치를 제어하는 데 사용됩니다. 헤더 레이아웃을 만들기 위해 우선 부모 요소에 대한 스타일을 지정합니다. 그런 다음, 부동 요소인 헤더를 만들고 clear 속성을 사용하여 여백을 설정합니다.

다음은 CSS clear를 사용하여 헤더 레이아웃을 만드는 예제입니다.

/* HTML */
<div class="parent">
  <header>Header</header>
  <div>Content</div>
</div>

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

header {
  float: left;
  clear: both;
  width: 100%;
  background-color: #f2f2f2;
  padding: 10px;
}

위 코드에서, .parent 클래스는 부모 요소를 나타내며 테두리와 내부 여백을 설정합니다. header 요소는 부동 요소로, 왼쪽으로 띄워지고 clear 속성을 사용하여 부모 요소의 상단부터 띄워집니다. 이를 통해 헤더 레이아웃을 구성할 수 있습니다.

이것은 clear 속성을 사용하여 헤더 레이아웃을 만드는 간단한 방법입니다. CSS clear 속성을 활용하여 더 다양한 레이아웃을 구성할 수 있습니다.