css下clear both、left、right值的含義

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>