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

<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>

<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>

<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>

<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>

<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>

<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>