본문 바로가기

■ 프로그래밍/HTML, CSS

[CSS] float

보고서 혹은 pt 발표를 할 때, word, ppt에 이미지와 텍스트를 같이 삽입하는 경우가 많다. 

이때 우리는 이미지 위치를 어디에 둘 것인지, 텍스트 바로 옆 혹은 하단 혹은 겹치게 둘 때 '이미지 우클릭' - '텍스트 줄바꿈'을 통해 위치를 정한다. 

이 같이 이미지와 텍스트의 위치를 변경할 때 사용되는 것이 CSS의 float 프로퍼티이다. 

 

웹페이지의 전체적인 레이아웃을 position으로 바꾼다면, float의 left, right, none 속성을 통해 더 정교하게 바꿀 수 있다. 

 

float: right
float: left
float: none

이미지 출처: https://www.w3schools.com/css/css_float.asp

 

하지만 자식 모두 float 속성을 가진다면, 부모의 높이가 0으로 측정되어 위로 올라간다. 

이를 해결하기 위해 몇 가지 방법이 있는데, 

1. 감싸고 있는 마지막 태그에 clear 속성 적용

2. 감싸고 있는 바깥 태그에 overflow: hidden; 적용

3. 감싸고 있는 바깥 태그에 float 적용

보통 2번 방법을 제일 많이 쓰며, 실 적용 사례는 https://grace-go.tistory.com/39를 참고하면 된다. 

'■ 프로그래밍 > HTML, CSS' 카테고리의 다른 글

image vh, vw 속성  (0) 2020.04.22
[CSS] Image-Sprite  (0) 2020.04.03
[CSS] Flex  (0) 2020.03.30
[CSS] inline, block, inline-block  (0) 2020.03.23
[CSS] position  (0) 2020.03.23