float

float: none|left|right|initial|inherit;

요소가 어떻게 떠다니는지를 지정합니다.

clear

clear: none|left|right|both|initial|inherit;

float 요소의 흐름을 해제합니다.

Clearfix 해킹

플로팅된 요소가 포함 된 요소보다 크면 해당 요소가 컨테이너 외부로 넘칠 것입니다
이런 때에는 overflow:auto; 를 이용하여 해결할 수 있습니다.
이 방법은 마진과 패딩을 제어할 수 있다면 잘 작동하지만 스크롤 막대가 표시될 수도 있습니다.
새롭고 현대적인 방법으로 다음의 코드가 대부분의 웹페이지에서 사용할 수 있습니다.

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}