float에 대해 정확하게 알고 이해하기 위해 정리한다.
float은 이미지를 텍스트 주위에 둘러 잘 어울리도록 하기 위해 만들어졌다.
페이지의 레이아웃을 구성하는데도 자주 쓰인다.
float은 뜨다 라는 의미이며 해당 요소를 띄워 원하는 곳에 배치한다.
-left, right, none 속성을 가진다.
-display 속성은 inline값을 가지게 된다.
-width, height 와 함께 사용이 가능하다.
다만 말 그대로 띄워서 배치하는 것이기 때문에 다음 컨텐츠들과 겹쳐 오류가 날 수 있고 그 오류를 해결하는 방법은 다음과 같다.
1. clear 속성을 적용한다.
float이 들어간 태그 다음에 아무 태그나 집어넣어 스타일에 clear 속성을 적용한다.
clear 속성을 적용하면 계속 적용되어있던 float 속성이 해제되고 다음 컨텐츠들은 float속성이 적용되지 않아 오류가 해결된다. ex) clear: both;
이 방법은 html에 코드를 더 추가하는 방법이므로 비추.
2. 부모요소에도 똑같이 float 을 적용한다.
자식요소와 부모요소 둘 다 float이 적용되어 있으면 당장의 컨텐츠들이 겹치는 오류는 피할 수 있어도 부모요소마저 inline 값으로 바뀌어 오류가 생기거나 반응형웹에 적합하지 않기 때문에 비추.
3. 부모요소에 overflow 속성 적용
부모요소에 overflow: hidden 혹은 overflow: auto 를 적용시키는 방법을 주로 많이 사용함.
overflow는 부모요소보다 자식요소의 컨텐츠 크기가 클 때 어떻게 할 지 설정하는 것으로 hidden은 넘치는 부분 자르기, auto는 넘치는 부분까지 크기를 넓히기 등으로 생각하면 된다.
사실 요즘은 flex 속성을 기반으로 페이지 레이아웃을 많이 구성한다고는 하지만 예전엔 많이 쓰였기 때문에 알아두는 것이 좋다고 한다.
