🪐CSS의 float 속성

CSS의 float 속성은 요소를 왼쪽이나 오른쪽으로 부유시켜 주는 속성이다. 이 속성은 해당 요소를 다른 요소의 주변으로 이동시켜 요소들이 서로 어떻게 배치되는지를 제어하는 데 사용된다.

---

다음과 같은 상황에서 주로 사용된다.

🎶 텍스트 주위에 이미지를 정렬

이미지를 텍스트 옆에 놓고 텍스트가 이미지 주위로 흐를 수 있도록 할 때 사용

🎶 다중 열 레이아웃

요소를 왼쪽이나 오른쪽으로 부유시켜 다중 열 레이아웃을 만들 때 사용

float 속성의 값으로는 left, right, none, inherit 등이 있다. 가장 일반적으로 사용되는 값은 left와 right이다. 요소를 왼쪽으로 부유시키면 왼쪽으로 이동하고, 요소를 오른쪽으로 부유시키면 오른쪽으로 이동한다.

---

float 속성을 사용 시 주의 사항

🌨️ 부유된 요소는 부모 요소의 높이를 자동으로 계산하지 않는다. 이를 해결하기 위해 부모 요소에 overflow: auto나 overflow: hidden 속성을 추가하여 부모 요소의 높이를 강제로 계산할 수 있다.

🌨️ 부모 요소에 clear 속성을 사용하여 부모 요소의 플로팅된 자식 요소에 영향을 받지 않도록 할 수 있다.

🌨️ 'float' 속성은 레이아웃을 조정하는 데 사용되지만, Flexbox나 Grid와 같은 더 나은 방법이 있으므로 가능하면 이러한 기술을 사용하는 것이 좋다.

---

# float가 left일 때

img {
    float: left;
    margin-right: 10px; /* 이미지와 텍스트 사이 간격 */
}

<div>
    <img src="example.jpg" alt="Image">
    <p>이미지와 함께 나타나는 텍스트</p>
</div>

---

#float가 right일 때

img {
    float: right;
    margin-left: 10px; /* 이미지와 텍스트 사이 간격 */
}

<div>
    <img src="example.jpg" alt="Image">
    <p>이미지와 함께 나타나는 텍스트</p>
</div>