Float 해제
• float에 아무런 대응도 하지 않은 상태
- Wrap은 A와 B의 부모 엘리먼트이며 A와 B는 자식 엘리먼트로서 현재 float된 상태 입니다. 아래 예제는 float해제를 하지 않은 상태이며 자식 엘리먼트(A, B)가 부모 엘리먼트(Wrap)의 높이에 영향을 주지 않는다는
사실을 보여주고 있습니다. float해제를 하지 않아 Wrap과 동일 레벨에 있는 Content가 올라와 있는 모습이 보이며, 레이아웃이 흐트러진 모습을 볼수 있습니다.
1) clear 속성으로 대응하기
- Wrap 영역이 끝나기 직전 빈 엘리먼트를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모(Wrap)가 자식(A, B)의 높이를 인식하도록 하는 방법입니다.
※ 의미 없는 빈 엘리먼트를 사용하기 때문에 이 역시 권장되는 방법은 아닙니다.
[HTML]
<div class="wrap">
Wrap
<div class="a">A</div>
<div class="b">B</div>
<div class="clear"></div>
</div>
[CSS]
.clear{ clear:both; }
.a{ float:left; }
.b{ float:right; }
|
2) Overflow 속성으로 대응하기
- Wrap 영역에 overflow속성을 부여하여 부모(Wrap)가 자식(A, B)의 높이를 인식하도록 하는 방법입니다.
※ overflow:auto 속성은 자식의 너비가 가변적이고 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 일반적으로 권장하는 방식이 아닙니다.
overflow:hidden 속성은 그러한 상황에서 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 넘치는 부분이 잘리기 때문에 이 역시 완전하게 안전한 방법은 아닙니다.(ex : 레이어팝업 생성)
[HTML]
<div class="wrap">
Wrap
<div class="a">A</div>
<div class="b">B</div>
</div>
[CSS]
.wrap{ overflow:hidden; }
.a{ float:left; }
.b{ float:right; }
|
3) float 속성으로 대응하기
- Wrap 영역에float속성을 부여하여 부모(Wrap)가 자식(A, B)의 높이를 인식하도록 하는 방법입니다.
※ 부모 영역에 float속성을 사용하여 wrap의 영역을 가지지만 Content가 밀려 올라오는 현상을 발생하기 때문에 일반적으로 권장하는 방식이 아닙니다.
[HTML]
<div class="wrap">
Wrap
<div class="a">A</div>
<div class="b">B</div>
</div>
[CSS]
.wrap{ float:left; }
.a{ float:left; }
.b{ float:right; }
|
4) display:inline-block 속성으로 대응하기
- Wrap 영역에 display:inline-block속성을 부여하여 부모(Wrap)가 자식(A, B)의 높이를 인식하도록 하는 방법입니다.
※ 표준계열 브라우저에서는 정확하게 랜더링 되지만 하위 브라우저(IE6~IE7)에서는 부모영역의 넓이 값이 없을시에는 100%로 출력됩니다.
또한 inline속성과 같이 박스가 끝나는 지점에 약4px 정도의 공백을 갖게 됩니다.
[HTML]
<div class="wrap">
Wrap
<div class="a">A</div>
<div class="b">B</div>
</div>
[CSS]
.wrap{ display:inline-block }
.a{ float:left; }
.b{ float:right; }
|
5) 가상 선택자 :after 속성으로 대응하기
- Wrap 영역에 가상선택자 :afer를 이용하여 부모(Wrap)가 자식(A, B)의 높이를 인식하도록 하는 가장 안전하다고 생각하는 방법입니다.
※ 가상 엘리먼트‘란, 존재하지 않는 엘리먼트를 가상으로 생성해내는 선택자로서, .wrap:after {content:" "} 시킨 다음 display:block; clear:both 처리를 추가하게 되면 의미 없는
빈 엘리먼트를 사용하지 않으면서도 가상 엘리먼트를 이용하여 깔끔하게 float이 clear됩니다.
단 IE7 이하 브라우저를 위하여 *zoom:1 속성을 .wrap에 포함 시켜 줍니다.
[HTML]
<div class="wrap">
Wrap
<div class="a">A</div>
<div class="b">B</div>
</div>
[CSS]
.wrap{*zoom:1;}
.wrap:after{ content:""; display:block; clear:both; }
.a{ float:left; }
.b{ float:right; }
|
