【css发动机】css下clear both、left、right值的含义

更新时间:2018-04-27    来源:样式布局    手机版     字体:

【www.bbyears.com--样式布局】

clear的值有四个

1.none:允许两边都可以有浮动对象;
2.both:不允许有浮动对象;
3.left:不允许左边有浮动对象;
4.right:不允许右边有浮动对象。
老实说,我没真正理解字面上的意思,因为这几段话是有歧义的,例如clear:right的解释是“不允许右边有浮动对象”,我一直以为是清除自身右方(下方)容器的浮动。但其实不是。下面一个一个DEMO的看,希望你能懂left和right到底是清除哪里的浮动。

一、普通浮动,无清除浮动,外容器塌陷:DEMO

 代码如下


 

普通浮动,无清除浮动,外容器塌陷


 
  
  • float:left;
      
  • float:left;
      
  • float:left;
     

    二、左浮动,clear:both清除浮动:DEMO

     代码如下


     

    左浮动,clear:both清除浮动


     
      
  • float:left;
      
  • float:left;
      
  • clear:both;
     

    三、右浮动,clear:both清除浮动:DEMO

     代码如下


     

    右浮动,clear:both清除浮动


     
      
  • float:right;
      
  • float:right;
      
  • clear:both;
     

    四、左右浮动,clear:both清除浮动:DEMO

     代码如下


     

    左右浮动,clear:both清除浮动


     
      
  • float:left;
      
  • float:right;
      
  • clear:both;
     

    五、左浮动,清除左浮动,左浮动,未清除浮动的塌陷:DEMO

     代码如下


     

    左浮动,清除左浮动,左浮动,未清除浮动的塌陷


     
      
  • float:left;
      
  • clear:left;
      
  • float:left;
     

    六、右浮动,清除右浮动,左浮动,未清除浮动的塌陷:DEMO

     

     代码如下
     

    右浮动,清除右浮动,左浮动,未清除浮动的塌陷


     
      
  • float:right;
      
  • clear:right;
      
  • float:left;
     

    (浮动外层容器加了背景色,如果此元素没有浮动,背景色即会包住他,反之则包不住)

    他们共用的css代码如下

     代码如下

    本文来源:http://www.bbyears.com/css/40976.html

  • 热门标签

    更多>>

    本类排行