CSS - 18-1. float 기반 레이아웃

float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구가 된다.

1. float 사용 예제

float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다. 그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어난다. 그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있다.

float을 해결하려면 clear라는 속성이 필요하다. float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티이다. 해결방법은 여러 가지가 있다.

해결방법 1. 바깥 div 마지막에 아무 태그나 넣고 clear 속성을 적용한다. 이 기법을 사용할 때에는 HTML 코드를 더 입력해야 한다는 부담이 있다.

해결방법 2. 주로 많이 사용하는 방법인데 바깥 div에 overflow: hidden;을 주는 것이다.

해결방법 3. 바깥 div를 float 시킨다. 그러면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 된다. 하지만 이것도 문제가 있는 게, float이 되어버려 block 요소의 성질이 없어지게 된다. 이러면 width를 100% 추가하거나 해야 한다.