DIV CSS 佈局教程網

 　　clear的值有四個

　　1.none：允許兩邊都可以有浮動對象;

　　2.both：不允許有浮動對象;

　　3.left：不允許左邊有浮動對象;

　　4.right：不允許右邊有浮動對象。

　　老實說，我沒真正理解字面上的意思，因為這幾段話是有歧義的，例如clear:right的解釋是“不允許右邊有浮動對象”，我一直以為是清除自身右方(下方)容器的浮動。但其實不是。下面一個一個DEMO的看，希望你能懂left和right到底是清除哪裡的浮動。

　　一、普通浮動，無清除浮動，外容器塌陷：DEMO

代碼如下  

<div class="box clearfix" id="box1">
<h3>普通浮動，無清除浮動，外容器塌陷</h3>
<ul>
<li class="item d_l fl">float:left;</li>
<li class="item d_c fl">float:left;</li>
<li class="item d_r fl">float:left;</li>
</ul>
</div>

　　二、左浮動，clear:both清除浮動：DEMO

代碼如下  

<div class="box clearfix" id="box2">
<h3>左浮動，clear:both清除浮動</h3>
<ul>
<li class="item d_l fl">float:left;</li>
<li class="item d_c fl">float:left;</li>
<li class="item d_r both">clear:both;</li>
</ul>
</div>

　　三、右浮動，clear:both清除浮動：DEMO

代碼如下  

<div class="box clearfix" id="box3">
<h3>右浮動，clear:both清除浮動</h3>
<ul>
<li class="item d_l fr">float:right;</li>
<li class="item d_c fr">float:right;</li>
<li class="item d_r both">clear:both;</li>
</ul>
</div>

　　四、左右浮動，clear:both清除浮動：DEMO

代碼如下  

<div class="box clearfix" id="box4">
<h3>左右浮動，clear:both清除浮動</h3>
<ul>
<li class="item d_l fl">float:left;</li>
<li class="item d_c fr">float:right;</li>
<li class="item d_r both">clear:both;</li>
</ul>
</div>

　　五、左浮動，清除左浮動，左浮動，未清除浮動的塌陷：DEMO

代碼如下  

<div class="box clearfix" id="box5">
<h3>左浮動，清除左浮動，左浮動，未清除浮動的塌陷</h3>
<ul>
<li class="item d_l fl">float:left;</li>
<li class="item d_c cl">clear:left;</li>
<li class="item d_r fl">float:left;</li>
</ul>
</div>

　　六、右浮動，清除右浮動，左浮動，未清除浮動的塌陷：DEMO

代碼如下   <div class="box clearfix" id="box6">
<h3>右浮動，清除右浮動，左浮動，未清除浮動的塌陷</h3>
<ul>
<li class="item d_l fr">float:right;</li>
<li class="item d_c cr">clear:right;</li>
<li class="item d_r fl">float:left;</li>
</ul>
</div>

　　(浮動外層容器加了背景色，如果此元素沒有浮動，背景色即會包住他，反之則包不住)

　　他們共用的css代碼如下

代碼如下  

<style>
div,h3,ul,li{margin:0;padding:0;}
h3{line-height:40px;font-size:14px;}
li{list-style:none;}
.box{width:500px;margin:0 auto;padding: 100px 0 500px;}
ul{background-color:#eee;}
.item{width:100px;height:100px;line-height:100px;font-size:12px;text-align:center;}
.d_l{background-color:#f00;}
.d_c{background-color:#ff0;}
.d_r{background-color:#00f;}
.clearfix:before,.clearfix:after{content:".";display:block;height:0;visibility:hidden;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}
.both{clear:both;}
.cl{clear:left;}
.cr{clear:right;}
</style>