보통 푸터 레이아웃을 만들 때, 부모 요소에 float 속성이 적용된 자식 요소가 있을 경우, 부모 요소의 높이가 0이 되어 콘텐츠가 부모 요소의 바깥으로 빠져나가는 문제가 발생합니다. 이때 clear 속성을 사용하여 부모 요소의 높이를 강제로 지정할 수 있습니다.

예를 들어, 다음과 같이 CSS를 작성하여 푸터 레이아웃을 만들 수 있습니다.

.footer {
  clear: both;
  width: 100%;
  background-color: #f2f2f2;
  text-align: center;
  padding: 20px 0;
}

이렇게하면 float 속성이 적용된 요소들의 영향을 받지 않고 원하는 푸터 레이아웃을 만들 수 있습니다.