[css] CSS clear와 float 속성의 관계는 무엇인가요?

26 Dec 2023

Float는 요소를 왼쪽이나 오른쪽으로 띄워서 텍스트나 다른 요소가 그 주위를 감쌀 수 있게 합니다. 예를 들어, 이미지를 텍스트 옆에 띄우기 위해 float를 사용할 수 있습니다.

그러나 float를 사용하면 부모 요소의 높이가 사라지거나 예상치 못한 레이아웃 문제가 발생할 수 있습니다. 이때 clear 속성을 사용하여 float 속성이 적용된 요소의 영향을 받지 않도록 할 수 있습니다.

간단히 말해, clear 속성은 float된 요소 주위의 다른 요소들이 어떻게 행동해야 하는지를 정의하는 데 사용됩니다. 만약 float된 요소 주위에 다른 요소가 더이상 감싸지 않도록 원한다면 clear를 사용할 수 있습니다.

이 관계를 보다 잘 이해하기 위해 간단한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .float-left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 20px;
      }

      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="float-left"></div>
    <p>This is some text that should wrap around the floated element. This is some text that should wrap around the floated element.</p>
    <div class="clear"></div>
    <p>This is some text that should appear below the floated element and the wrapping text.</p>
  </body>
</html>

이 예제에서, .float-left 클래스가 float되어 있고, .clear 클래스가 clear 속성을 가지고 있습니다. 이를 통해 텍스트가 float된 요소 주위를 감싸지 않고 바로 아래에 표시될 수 있도록 설정되었습니다.

더 자세한 정보가 필요하다면 MDN 웹 문서를 참고하시기 바랍니다. MDN clear 속성 문서