왜 클리어픽스를 사용해야 하는지 먼저 알아볼까요?
HTML 문서 구조에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다.
이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 합니다.
Clear 속성 - float 속성 해제하기
float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치할 수 있습니다.
float 속성을 사용한 요소 이후 요소들에도 똑같이 속성이 적용 됩니다.
float 속성이 적용한 후 다음 요소에 float속성이 적용되지 않도록 하는 것이 Clear속성입니다.
clear:left ;
clear:right ;
clear:both ;
를 사용하여 원하지 않는 요소에 float속성을 해제합니다.