Float, Clearfix Method

◎ Float

- left, right, none (텍스트의 흐름대로, default)

- width를 반드시 지정해야 한다 (ex. width: 25%;)

- clear: what elements can float beside the cleared element and on which side

- none: allows floating element on both side, default

- left/right: no floating on the left/right side (float 되어 있는 박스보다 아래에 새로운 박스를 생성)

- both: no floating on the both side

- 주로 'float' 를 사용한 뒤 'clear(both가 대부분)' 를 사용한다 > 이전 float의 속성을 지워주는 역할

- clearfix > overflow: auto / hidden;

◎ clearfix method 

- 부모가 float 자식을 담고 다음 요소에 float의 영향을 받지 않기 위해 사용

- problem: 부모 요소에 사이즈를 지정하지 않으면 자식을 감싸지 못함

- solution 1: 자식 요소 밑에 <br class="clearfix"> 추가 (예시의 <div>의 class명이 'clearfix' 가 아닌 경우)

-                  .clearfix { clear: both; } > not recommend!

- solution 2: .clearfix { overflow: hidden / auto; } 

- hidden: 내용이 잘릴 수 있음

- auto: 스크롤바가 생성됨

- solution 3: 가상 클래스 :before, :after

- IE8 이하까지 지원하지 않을 경우 사용해도 무방

- .clearfix:after {

content: "";

clear: both;

display: table;

  }

- 참조: http://aboooks.tistory.com/328