[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를 참고하면 된다.