<div id="test1">

<div class="test2">left</div>

<div class="test3">right</div>

<div style="clear:both"></div>

<!-- clear:both 선언한 태그의 자신부터 float가 해제된다 -->

</div>

<style type="text/css">

#test1 {float:left; padding:50px; background:orange;}

<!-- 자식이 float되었으므로 부모에게도 float 선언하여 자식이 float 되었음을 알려준다. -->

.test2 {float:left; margin-right:50px; background:red;}
.test3 {float:right; background:blue;}

</style>

<div id="test1">
<div class="test2">left</div>
<div class="test3">right</div>
</div>

<style type="text/css">
/* ie haslayout */
#test1 {overflow:hidden; zoom:1; background:orange;}

/* 부모한테 overflow:hidden; zoom:1;을 줘서 자식이 float임을 알려준다.*/
.test2 {float:left; background:red;}
.test3 {float:right; background:blue;}
</style>

<div id="test1">
<div class="test2">left</div>
<div class="test3">right</div>
</div>

<style type="text/css">
* {margin:0; padding:0;}
ul {list-style:none;}
body {font-size:12px; font-family:gulim; color:#333333; padding:30px;}

/* 탭 */
.tab {overflow:hidden; zoom:1;

background:url(이미지파일path) left bottom repeat-x;}

/* 자식이 float이므로 float 선언해준다. */
.tab li {float:left; margin-right:5px; border:1px solid #666666; text-align:center; line-height:50px;

border-bottom:none;}

/* 자식이 float이므로 float 선언해준다.

텍스트가 탭의 가운데에 오도록 하며 세로크기의 온전한 링크영역을 위해 line-height:50px; */
.tab li a {float:left; width:100px; height:100px;}

/* a는 inline요소이므로 원하는 width값과 height값만큼 링크 영역을 잡을 수가 없다. 그래서 float:left;를 쓴다.

float:left를 쓰면 width값 height값이 먹으므로.. display:block 을 쓰기도 한다.*/

.tab li.current {background:white;}

/* li.current는 li 태그 안에 current를 의미, li .current는 li 태그의 하위를 의미 */
.tab li.current a {font-weight:bold; color:red;}
</style>

<ul class="tab">
<li><a href="#">탭내용1</a></li>
<li class="current"><a href="#">탭내용2</a></li>
<li><a href="#">탭내용3</a></li>
<li><a href="#">탭내용4</a></li>
</ul>