Clearance

마진 병합에 대해서 W3C 레퍼런스를 찾아보다가 등장한 단어 “Clearance”
CSS에 대해서 다 알진 못하더라도 대부분의 단어에 대해서 들어보긴 했다고 생각했는데 이 단어는 정말 처음 들어봤다.
처음 들어보는 단어다 보니, 당연히 W3C에 있는 문장들을 이해할 수 없었다.
도대체 clearance가 뭐야??

구글링을 해봐도 한글로 된 설명글은 나오지 않았고 이름이 clearance 인걸로 보아 그냥 clear 속성을 가진 것을 말하나 보다 라고 생각했다.
이런 오해로 인해 더 오래 고민하고 더 오래 고생했다.
혹시 나같은 사람이 또 있을까 싶어 clearance에 대한 정리를 해보겠다.

먼저, clearance가 있으려면 clear 속성이 none이 아니어야 한다.
그런데, clear 속성이 none이 아니라고 다 clearance가 있는 것은 아니다.

codepen 예시로 살펴보자.

See the Pen clearance가 있는 경우 by kimjaemin (@jaime_jam) on CodePen.

위의 상황을 정리해보면,
Block F는 float: left 됐고, Block C는 clear: left된 상태이다.
그런데, B 상자의 높이가 F 상자의 높이보다 더 낮아서 C 상자와 B 상자 사이에 높이차가 생겼다.
이를 바로 clearance가 있다고 한다.

정리하자면, clear 속성값이 none이 아닌 경우에 clear로 인해 거리차가 발생하는 경우를 말한다.

그렇다면, clearance가 없는 상황은 무엇인지 예제를 통해 살펴보자.

See the Pen no clearance by kimjaemin (@jaime_jam) on CodePen.

이 예제는 위의 예제와 같은 조건에서 B 상자의 높이값이 150px로 F 상자의 높이값 100px보다 커졌다.
높이값이 늘어나면서 B 상자와 C 상자 사이에 거리차가 없어졌다.
따라서 이 예제는 clearance가 없다.

이 간단한 예제로 완벽하게 clearance를 이해할 순 없겠지만 마진 병합에 필요한 clearance 개념은 이 정도로 충분하다고 생각한다.

추후에 시간이 나면 clearance에 대한 레퍼런스를 해석해보도록 하겠다.