萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css下clear both、left、right值的含義

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>

copyright © 萬盛學電腦網 all rights reserved