모던 웹사이트 디자인의 정석 Question

Q) 왜 clear:both를 했는데 레이아웃 깨짐현상이 잡히는걸까?

A) 우선 li 태그들을 가로로 배치했다는 점에 주목한다.

이 때 li 태그의 display 속성은 list-item 이다. 이는 다음과 같다.

• List 계열
  <li> 태그에서는 특이하게도 list-item라는 display 속성을 사용합니다. 기본적으로는 Block-level의 요소들처럼 작동하지만, 추가적으로 list-style 계열의 CSS 속성을 이용할 수 있다는 특징이 있습니다.
  출처 : http://dev.epiloum.net/834

그러므로, div 태그에 사용했던 것처럼 float 속성을 사용하여 가로로 배치할 수 있게 된다.

 

그런데, 컬럼 탈락 현상을 사용하기 위하여 li 태그의 길이를 50%로 하였다.

이렇게 했을 때 float 의 특성상 그려진 line-box의 영역의 제일 작은 top 위치에 그려지는데, 그게 바로 두번째 li 요소 밑인 것이다.

 

그러므로 세번째 li 요소가 원치않은 위치에 있으므로 이를 잡기 위해서 앞선 float 속성들을 취소시킨다.

 

그러면 일반 block 요소가 되지만 크기가 지정되있으므로 그 다음 줄에 그려진다. 이렇게 레이아웃 깨짐현상을 잡는다.

 

clearfix는 정확히 어떻게 동작하는건가?