CSS의 float 속성은 요소를 좌우로 움직여서 다른 요소 주위에 정렬시킬 때 사용됩니다. 주로 이미지나 텍스트를 감싸는 레이아웃을 만들 때 많이 활용됩니다.

기본 사용법

요소에 float 속성을 적용하면 해당 요소는 정렬하고 싶은 방향으로 흐르는 특성을 갖게 됩니다. 일반적으로 float: left; 또는 float: right;와 함께 사용됩니다.

.image {
  float: left;
}

.text {
  float: right;
}

주의 사항

float 속성을 사용할 때 주의해야 할 사항도 있습니다. 부모 요소가 자식 요소의 높이를 잘못 계산하여 배치되는 문제가 발생할 수 있습니다. 이때는 clearfix 기법을 사용하여 문제를 해결할 수 있습니다.

레이아웃 구성 예시

float 속성을 사용하여 이미지와 텍스트를 감싸는 레이아웃을 만들어보겠습니다.

<!-- HTML -->
<div class="container">
  <img class="image" src="example.jpg" alt="Example image">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

/* CSS */
.image {
  float: left;
  margin-right: 10px;
}

.text {
  float: right;
}

이렇게 하면 이미지와 텍스트가 옆으로 나란히 배치되는 레이아웃을 만들 수 있습니다.

요약

float 속성은 요소를 좌우로 정렬하기 위해 사용되며, 주로 이미지나 텍스트 레이아웃을 만드는 데 활용됩니다. 그러나 부모 요소의 높이 계산 문제 등을 유의하여 사용해야 합니다.

더 많은 자세한 내용은 MDN web docs에서 확인할 수 있습니다.