HTML&CSS

[CSS] Float Property

JayLee 2018. 6. 14. 11:35
반응형

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


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


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


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

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


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


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

반응형

'HTML&CSS' 카테고리의 다른 글

[HTML5] Audio  (0) 2018.08.13
[CSS] Clear Property  (0) 2018.06.15
[CSS] Float Property  (0) 2018.06.14
[CSS] Position Property  (0) 2018.06.12
[CSS] Display Property  (0) 2018.06.11
[CSS] !important, IE placeholder 색상 적용되지 않는 문제.  (0) 2018.02.22
1 ··· 3 4 5 6 7 8 9 10 11