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

更新时间：2016-12-27整理编辑：建站学习网阅读：0

　　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代码如下

代码如下