[ CSS ] float 레이아웃 문제해결

 

float을 clear하는 4가지 방법

---

CSS 속성 가운데 float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성입니다.

float은 사전적 의미로 ‘뜨다, 띄우다, 뜨는 물건, 부유물’ 이라는 의미가 담겨져 있습니다. float은 높이가 가변적인 형태의 CSS 레이아웃을 위하여 반드시 요구되는 속성으로서 처음 CSS 배치기법을 익힐 때 가장 이해하기 어려운 속성중의 하나 입니다.

left와 right를 주어 레이아웃들을 정렬할 수 있지만 해제를 해주지 않으면 부모요소의 높이값이 사라져 레이아웃끼리 겹쳐지는 현상이 발생합니다.

 

그래서 반드시 float를 이용해 정렬을 한 후에는 float를 해제해 주어야 합니다.

---

[ float 해제하는방법 4가지 ]

 

 

1. 가상 요소 :after 사용(권장)
2. overflow속성 사용
3. 빈 엘리먼트에 clear속성 적용
4. float로 대응

---

1. 가상 요소 :after 사용

우선 ‘가상 선택자‘라는 개념을 이해하셔야 합니다.

흔히 알고있는 :link, :visited, :hover, :active, :focus 는 모두 가상클래스입니다.

‘가상 선택자’는 다시 ‘가상 클래스‘와 ‘가상 엘리먼트‘로 구분할 수 있는데요.

 

'가상 클래스'는

요소에 직접적으로 클래스를 부여하지는 않았지만, 요소의 상태에 따라서 클래스를 적용한 것처럼 효과를 다르게 줄 수있습니다. 가장 많이 쓰는 예시는 a태그의 효과를 바꾸기 위해 a:hover, a:link 이고, 이때 a뒤에 쓰인 :hover, :link를 가상 클래스라고 합니다.

 

'가상 요소'는

말 그대로 가상의 요소를 만들고 내용을 넣어 출력하겠다는 것입니다.

보통 ::after, ::before을 자주 사용합니다.

 

그럼 ::after로 어떻게 해제 하는지 알아보면
float 속성을 적용한 요소의 부모요소에 ::after를 사용해주면 됩니다.

#container::after {content:""; display:block; clear:both;}

하지만 Internet Explorer는 :before, :after 가상 엘리먼트 선택자를 지원하지 않기 때문에 다음과 같은 Hack이 필요합니다. 

#container {*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */
#container:after {content:""; display:block; clear:both;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */

IE 5~7 브라우저는 hasLayout이라는 고유한 성질을 갖게 되면 float을 해제하는 트리거로 작용하는 성질이 있고 zoom:1 속성이 hayLayout 이라는 성질을 갖도록 하기 때문에 IE 5~7 브라우저 고유의 특징을 이용한 해결방법 입니다.

 

---

 

2. overflow속성 사용

자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow:auto 또는 overflow:hidden 속성을 부여하는 방법이 있습니다.

'overflow: auto' 사용시 자식의 너비가 부모의 너비보다 크다면 가로 스크롤바가 생기고,
'overflow: hidden'의 경우 넘치는 부분이 잘리기 때문에 사용하지 않는것이 좋습니다.

 

---

 

3. 빈 엘리먼트에 clear속성 적용

이 방법은 #container 영역이 끝나기 직전 빈 엘리먼트를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모가 자식의 높이를 인식하도록 하는 방법입니다. 하지만 의미 없는 빈 엘리먼트를 사용하기 때문에 이 역시 권장되는 방법은 아닙니다.

.clear {clear:both; height:0; overflow:hidden;} 처리하여 .clear 라는 빈 엘리먼트가 높이를 갖지 않도록 하고 보이지 않도록 처리 합니다.

 

---

4. float로 대응

float속성을 가진 자식요소의 부모요소에 똑같이 float를 적용해 주는 방법인데 반응형 웹에 적합하지 않으므로 권장하지 않습니다. 

또한 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상 엘리먼트에게 각각 전달하기 위하여 조상 엘리먼트들을 모두 float 시켜야 하므로 일반적으로 사용하는것을 권장하지 않습니다.