CSS float과 Clearfix

CSS강의를 듣던 중 만난 float 버그

사진 출처 : https://www.w3schools.com/howto/howto_css_clearfix.asp

div같은 컨테이너로 둘러싸인 element에 float을 적용하면
적용된 element가 컨테이너를 무시하고 배열되며
element를 감싸고 있던 컨테이너의 높이가 0이 되는 버그이다.
(첨부 사진은 div 내부에 text가 있어서 높이가 0이 되지는 않았다)

구글에 살짝 찾아본 바로는 발생한지 아주 오래된 버그인듯 한데
내가 흥미로웠던 부분은 버그에 대한 대책이 버그를 고치는게 아니라
뒷수습을 하는 방법을 발전시키는 쪽으로 진행되었다는 점이다.

해당 버그가 발생하는 이유는 허접한 개발자 지망생인 내가
구글신의 힘을 빌려도 알아내기 힘드니, 버그의 대책인 Clearfix에 대해 알아보겠다.

1. height를 1%로 만들기

초창기의 clearfix는 float가 적용될 elements의 height를 1%로 만드는 방법이었다.

* html .buggybox {height: 1%;}

Holly Begevin이라는 개발자가 고안한 이 방법은 Windows의 IE에서는
잘 동작했지만 안타깝게도 Mac에서는 동작하지 않았다고 한다.

2. :after와 clear: both

.floatcontainer:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

/* Mark Hadley's fix for IE Mac */     
.floatcontainer {
  display: inline-block;
}

/* Hides from IE Mac \*/
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}

Tony Aslett이라는 개발자는 이 방법을 고안하며 'clearfix'라고 명명하였고,
mac용 IE에 적용하기위해 javascript를 사용해야 했던 clearfix 초안에 Begevin의 아이디어를 버무려 javascript 없이도 모든 브라우저에 적용 가능한 clearfix를 완성했다.
(CSS3에서는 ::after를 사용하지만 CSS2에서 사용하던 :after도 사용 가능하다고 한다)

3. 최신 cleafix

clearfix의 첫 등장 이후로 이런저런 발전이 있었지만
가장 간략화 된 최신 clearfix까지만 소개해 보겠다.

다음은 Rachel Andrew가 2017년 자신의 블로그에 올린 코드이다

.container {
  display: flow-root;
}

elements를 감싸고 있는 container의 display 속성에 flow-root를 적용하면
기존의 clearfix와 동일한 효과를 볼 수 있다고 한다.

잡설

내가 CSS강의에서 배운 clearfix는
위에서 소개한 2번의 형태에서 좀 더 발전된 형태였었지만,

"대체 버그는 안잡고 대책만 알려주는 이유가 뭘까?"
라는 의문이 들어서 검색해본 결과 찾으려던 버그의 정체는 찾지 못하고
더더욱 발전된 clearfix만 찾아내고 말았다.

프론트엔드에 집중하는 강의가 아니라서 CSS를 깊게 공부하지는 않겠지만,
언젠가 정체를 밝혀내겠다고 다짐해본다.

내 개발실력이 늘어서 버그의 원인을 이해할 날이 빠를지,
아니면 출처의 후반부에 적힌대로 clearfix가 필요 없어지는 날이 오는게 빠를지 모르겠지만...

정보 출처: https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/