[CSS] float clear하는 방법

float

뜨다 라는 의미이며, block요소를 지정한 위치에 떠있도록 배치하는 속성이다

float를 clear한다는 의미는?

float으로 컨텐츠를 띄울 시 다음 내용은 빈자리를 채우려 올라오게 된다.
이러한 현상은 브라우저의 오류로 생겨난 것이고,float의 부작용을 해제한다는 의미이다.

float clear 방법

1. 부모 요소에 높이값(height) 부여 => 높이를 고정으로 주는 콘텐츠가 아니라면 높이값으로 float를 해제하는 것은 바람직하지 못하다. 근본적인 해결이 안된다.
2. 부모 요소에 float 적용 => 부모요소의 레이아웃이 깨지는 현상이 일어난다. 그 부모의 부모에서 또 float를 해제해야하기 때문에 이 방법은 불편하다.
3. 부모 요소에 overflow:hidden 적용 => 해당 요소 안의 콘텐츠를 박스 외부로 표현할 수 없다. 예를 들어 자식요소에서 부모요소보다 위로 올라가는 이미지 요소를 올리게 되면 잘리게 된다.
4. 부모 요소에 overflow:auto 적용 => 특정 브라우저에서 스크롤바가 표시된다. 예를 들어 자식 요소가 부모 요소의 가로길이보다 크면 가로 스크롤바가 생기고 세로 스크롤바가 생기는 경우에는 사용할 수 없다.
5. float된 요소 다음에 나오는 태그에 clear:both 적용 => clear:both된 요소에 margin-top적용이 불가하다.
6. 부모 요소에 가상요소 선택자 ::after 를 만들고 clear:both 적용 => 최고의 방법이다!