📌Float 속성이란 웹 페이지에서 요소를 배치하는 데 사용되는데,
주로 텍스트나 이미지를 서로 옆에 나란히 또는 글 흐름을 둘러싸도록 배치할 때 쓰입니다.
이 속성은 주로 레이아웃 디자인에 활용되며, 요소를 좌우로 부유시키는 효과를 만듭니다. ex) 기사
float 속성
1️⃣ left: 요소를 왼쪽으로 부유시킵니다.
2️⃣ right: 요소를 오른쪽으로 부유시킵니다.
3️⃣ none: 요소를 띄우지 않은 기본 부유상태입니다.
4️⃣ inherit: 부모 요소로부터 상속받습니다
5️⃣ clear: 주로 float 속성이 적용된 요소의 영향을 (both: 양쪽에 부유된 요소의 영향을 해제) 을 이용하여 해제하고 다음 요소가 부유된 요소의 영역에 접근하지 못하도록 지정하는 데 사용
🔽코드 예제🔽
텍스트두 개의 < div >를 만들고 하나를 왼쪽으로 부유(float: left;)시키고, 다른 하나를 오른쪽으로 부유(float: right;)시키면 이 두 < div >는 나란히 나타납니다. 그리고 다른 내용이 이 두 < div >를 감싸도록 할 수 있습니다.
이 코드에서 .left-box와 .right-box는 왼쪽과 오른쪽으로 부유시켜 나란히 위치하게 되며, 그 아래에 .clear-both는 부유된 상자들을 감싸도록 하는데, 이를 위해 clear:both; 속성을 사용합니다.
📌 float 속성은 초기에 웹 디자인에서 레이아웃을 만드는 데 사용되었지만, 복잡한 레이아웃을 구현하려고 할 때 유지보수 어려움과 예상치 못한 동작의 문제가 발생할수있어서 현재는 flexbox와 grid와 같은 레이아웃 기술을 권장하고있습니다.
