[CSS] Float Property

 안녕하세요. Jay입니다. 오늘은 Float에 대해서 알아보도록 하겠습니다.

 "CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다." 라고 정의되어 있습니다. 말이 좀 어렵죠? 실제로 어떻게 보이는지 확인해보도록 하겠습니다.

 먼저 float를 사용하지 않은 이미지와 텍스트의 배치를 보겠습니다.

 이미지의 하단 부분부터 텍스트가 시작되는 것을 볼 수 있습니다. 이미지 옆 부분에는 빈 공간도 보이네요.

 그럼 float css를 사용해보겠습니다. float: right 로 지정했습니다.

 어떤가요? 이미지가 오른쪽에 배치되고 텍스트들이 이미지를 감싼 것을 확인할 수 있습니다. 빈 공간도 사라졌네요. float에 대해서 감이 좀 오시나요?ㅎㅎ

 적절할 때에 float를 사용해서 좋은 layout 구조를 만드시길 바랍니다~!ㅎㅎ