CSS에서 디자인을 하다가 float된 요소를 자식으로 품고 있는 부모가 같이 float되지 않은 경우 자식이 부모 밖으로 튀어나가는 경우를 볼 수 있다. 아래처럼 말이다.
이런 경우 가장 깔금한 해결책(가상 선택자 :after와 zoom:1)을 담은 글을 발견해서 아래 접었다 폈다를 펼치면 볼 수 있다.
원문은 http://naradesign.net/open_content/lecture/wp/ 에서 볼 수 있다. 원문에는 모든 해결책의 유형을 제시하고 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float</title>
<style type="text/css">
.wrap { background:#CCCCCC; width:600px;}
.wrap:after { content:""; clear:both; display:block; *zoom:1;}
.left { float:left; width:200px; height:200px; background:#FF3333; }
.right { float:right; width:400px; height:100px; background:#0066FF }
</style>
</head>
<body>
<div class="wrap">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div style="background:#00CC00; width:600px; height:30px;">kimkee@naver.com</div>
</body>
</html>
http://imgwizard.com/45576
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| ie6 frame 잔상이 생기는 현상 (0) | 2010.08.12 |
|---|---|
| HTML 버전별 DTD (0) | 2010.08.07 |
| css로 완벽히 이미지 투명도 조절하기. (0) | 2010.03.06 |
| IE6에서 PNG파일을 사용하고 싶어요. (1) | 2010.02.26 |
| vertical-align (0) | 2009.09.22 |
