(CSS)float를 clear하는 방법

float는 여백없이 요소를 붙여주는 특징이 있으므로 레이아웃 설계 시 많이 사용된다.
부모 요소의 height 값은 자식 요소의 height값에 따라 늘어나거나 줄어드는데, float 속성을 자식 요소에 사용했을 때, 요소들은 float의 이름처럼 붕 뜬 상태가 된다.
그렇기 때문에 부모 요소가 자식 요소들의 높이를 인식하지 못하는 현상이 발생한다.

이러한 문제점을 해결하기 위해서는 float를 클리어해줘야 한다. 4가지 방법이 있다.

• 가상요소 ::after

.wrap::after{
    content: '';
    display: block;
    clear: both;
}

::after는 실제로는 존재하지 않는 가상요소를 생성해주는 선택자이다. 실제로는 존재하지 않는 빈공간에 clear:both를 적용시켜 뒤에 오는 요소들이 영향을 받지 않도록 한다.
float 속성을 적용한 요소의 부모요소에 ::after를 사용해주면 된다.

• overflow : hidden

overflow:hidden은 float를 클리어 하기위해 존재하는 속성은 아니고 컨텐츠의 내용이 지정한 크기의 영역을 넘어갈 때 넘어가는 부분을 숨겨주라는 속성이다.
하지만 넘치는 부분이 잘리기 때문에 경우에 따라 사용하지 못할 수도 있다.

• 빈 요소를 이용하여 clear 속성 적용

1번과 비슷한 개념인데 1번에서는 가상요소를 사용했지만, 이 방법은 빈 태그를

.clearfix{
    zoom: 1;
}
.clearfix::before, .clearfix::after{
    display: block; 
    content: ''; 
    line-height: 0;
}
.clearfix::after{
    clear: both;
}

만들어서 float를 해제하는 방법이다.

• 부모 요소에게도 float 속성 사용

자식 요소의 높이를 부모 요소에게도 반영하는 방법으로 부모 요소에게도 float 속성을 부여해주는 방법이 있다.
부모 요소에게 float 속성을 부여하게 되면 자식 요소의 높이를 반영하게 된다. 하지만 부모 요소의 너비가 화면 사이즈에 따라 가변적이어야 할 때는 사용하지 못할 수 있다.

첫번째 방법을 사용해주는 것이 가장 좋다.