CSS Float

 CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

 

mozilla에서 float을 위와 같이 정의한다. 보통, 단어 뜻 그대로 '떠다닌다' 하면 뭘 어떻게 떠다닌다는 것인가? 라는 의문이 들기 마련이다. float은 인라인 요소가 float속성이 적용된 요소를 감싸는 효과라고 생각하면 된다. 

 

left - 부모요소의 left side부터 차례대로 위치된다.

right- 부모요소의 right side부터 차례대로 위치된다.

none- float형태로 적용되나 다음에 오는 element의 좌우 크기가 남은 공간보다 크면 다음 줄에 표시된다. 여러 요소를 넣게 되면 같은 시작점에 계속 들어가는 상황이 발생한다. 아래 사진과 같은 결과가 발생하므로 사용시 주의가 필요하다. 다음 요소에 clear속성 값을 설정하는 등 별도의 설정과정을 요한다.

inherit: 부모 값 상속

 

 

 

float을 사용하고 다음에 오는 요소들이 감싸는 것이 아니라 다음 라인에 오고 싶다면 어떻게 해야할까?

두 가지 대표적인 방법이 있다.

1. 다음에 오는 요소에 clear: both를 설정한다.

2. float을 사용하는 부모요소에 overflow:hidden 속성을 사용한다.

정해져 있는 것은 아니고 float의 효과를 없앨 수 있는 방식을 택하면 된다.

 

 

 

참고 사이트

https://www.w3schools.com/css/css_float.asp

https://www.zerocho.com/category/CSS/post/5881edef636a7f0b8e8507d8