我们经常可能会看到大家在写清除浮动时会使用到clear属性的both、left、right三种方法，那么有些朋友对clear就不清楚什么原因了，下面我来举例说明。
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>
|
