Float 준 다음에 그 부모컨테이너에
after로 clear:both해주는 이유는?
float을 지정한 박스는 floating box라는 특수한 박스로 처리된다. 따라서 다른 박스가 인식하지 못하게 되는데 clearfix(부모 컨테이너의 after로 clear:bothf를 주는것)를 줘서 이후의 형제 요소에 영향을 주지 않게 만들어준다.
이 방법 외에도 부모 컨테이너에 overflow:hidden을 적용하는 방법이 있다.
Overflow:hidden을 적용한 박스는 block formatting context로 취급받아서 내부의 플로팅 박스를 포함하여 영역을 잡게 된다.
하지만 부모 컨테이너를 벗어나는 위치에 자식 요소를 배치하면 삐져나오는 부분이 숨겨진다는 점이 있으므로 되도록 clearfix 기술을 사용하는 것이 나을 것 같다.
- 칼럼 탈락 현상
Float 속성을 지정한 박스 배치가 깨지는 현상으로 가로로 정렬한 박스의 너비가 100%가 넘어서 옆으로 삐져나온 박스가 개행되어 출력된다.
