float
float은 '뜨다'라는 뜻으로, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 때 사용하게 됩니다. 왼쪽으로 정렬하거나, 올ㄴ쪽으로 정렬하거나, 문서를 layout 할 때도 사용할 수 있습니다.
float은 none, left, right, initial, inherit를 사용하여 레이아웃 시킵니다.
float 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없습니다.
- none : 띄우지 않음 (기본)
- left : 왼쪽에 띄움
- right : 오른쪽에 띄움 (기본)
- initial : 기본값으로 설정함
- inherit : 부모 요소로부터 상속함
Clear - floating 해제 기법
floating 하게된 요소는 흐름상에서 벗어난 상태이기 때문에 레이아웃이 무너질 수 있습니다.
float을 사용하면 이러한 현상이 자주 발생하게 되는데 이때, float을 해제 해 주어야 합니다.
float이 적용된 요소를 해제하는 것이 아니라 clear 속성을 적용시켜 float의 영향을 받지 않도록 하는 것을 의미합니다.
clearfix라는 방법이 있는데 clear 속성을 적용하기 보다 다른 방법으로도 float을 해제할 수는 있으나 float을 사용해 레이아웃을 잡다보면 clear가 필요해지는데 가급적이면 float된 요소의 부모 요소에 clearfix를 적용합니다.
- left : 왼쪽에 floating 된 요소를 지정 해제
- right : 오른쪽에 floating 된 요소를 지정 해제
- both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
- none : 기본값, floating 해제하지 않음
clearfix에는 여러가지 방법이 있는데 4가지를 소개하도록 하겠습니다.
1.가상 요소인 ::after를 사용한다.
float 속성을 적용한 부모 요소에 ::after를 사용하여 뒤의 값을 초기화 시켜준다.
2. overflow 속성을 사용한다.
float 속성을 적용한 부모 요소에 overflow:hidden, overflow:auto를 적용시킨다.
auto 사용시 자식의 넙가 부모의 너비보다 크면 가로 스크롤바 생성.
hidden 사용시 넘치는 부분이 잘림. (잘리기 때문에 좋지 않다.)
3. 빈 엘리먼트로 clear 속성을 적용한다.
빈 태그를 만들어 clear:both; height:0; overflow:hidden;을 적용해 눈에 보이지 않는 태그를 반들어 float을 해제하는 방법이지만 불필요한 태그를 만들기 때문에 좋지 않다.
4. float으로 대응한다.
float 속성을 가진 자식 요소의 부모 요소에 똑같이 float을 적용하는 방법인데 반응형 웹에 적합하지 않는 방법이므로 사용하지 않는것이 좋다.
