How to set clearfix and define

 일명 버그라고 알려져 있고, CSS를 사용할 때 수없이 사용되는 필수 학습해야 하는 코드입니다.

 왜 클리어픽스를 사용해야 하는지 먼저 알아볼까요?

 HTML 문서 구조에서 부모 요소가 자식 요소를 감싸고 있을 때, 자식 요소에게 float 형식을 적용하면 부모 요소가 자식 요소를 더 이상 감싸지 않게되고 높이 값을 파악하지 못하게 되는 버그가 발생합니다. 따라서 부모 요소의 높이 값이 0px로 출력되고, 전체적인 HTML 요소들이 뒤엉켜버리는 경우가 많습니다. 

 이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 합니다.

 다양한 방법이 있는데, 저는 항상 이 코드를 사용합니다.

 마이크로 클리어픽스(Micro Clearfix)라고 불리구요. 코드가 가장 간결합니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

/**  * For modern browsers  * 1. The space content is one way to avoid an Opera bug when the  *    contenteditable attribute is included anywhere else in the document.  *    Otherwise it causes space to appear at the top and bottom of elements  *    that are clearfixed.  * 2. The use of `table` rather than `block` is only necessary if using  *    `:before` to contain the top-margins of child elements.  */ .cf:before, .cf:after {     content: " "; /* 1 */     display: table; /* 2 */ }   .cf:after {     clear: both; }   /**  * For IE 6/7 only  * Include this rule to trigger hasLayout and contain floats.  */ .cf {     *zoom: 1; }

출처: http://nicolasgallagher.com/micro-clearfix-hack/

 IE6, 7은 거의 사용되지 않으니 젤 하단의 코드는 사실 필요 없습니다.

 제가 강조시킨 부분만 해당 div 등의 요소에 .cf를 추가시키거나 상위 코드에 .cf를 해당 요소의 클래스 값으로 수정하셔도 상관 없습니다.

 사실 float은 클리어픽스 등 사용방법의 민감함 등으로 인해 저같은 경우는 잘 사용하지 않고, 사실 부모 요소에 position: relative;를 주고 자식 요소에 position: absolute;를 줘서 top: 10px; left: 20px; 이런 식으로 CSS를 짜는 경우가 많습니다.

 꽤 중요한 코드인데 팁 게시판에 없길래 올려봅니다. 이 글 보관 해두셨다가 필요하실 때마다 사용하시길!!