CSS-clear属性的作用

1 <!DOCTYPE html> 
  2 <html lang="en">
  3 <head>        
  4     <meta charset="UTF-8">      
  5     <title></title> 
  6     <style>   
  7     .box1{    
  8         width:100px;
  9         height:100px;  
 10         background-color:yellow;
 11         float:left; 
 12     }         
 13     .box2{    
 14         width:100px;
 15         height:100px;  
 16         background-color:orange;
 17         /*clear:left;*/
 18         /*clear:right;*/                                           
 19         clear:both;
 20     }    
 21     .box3{    
 22         width:200px;
 23         height:300px;
 24         background-color:#bfa;
 25         float:right;
 26     }    
 27 /*            
 28 如果我们不希望某个元素因为其他元素浮动的影响二改变位置，可以通过cle    ar属性来清除浮动元素对当前元素的所产生的影响
 29     clear:
 30         -作用：清除浮动元素对当前元素所产生的影响
 31         -可选值
 32             -left清除左侧元素对当前元素的影响
 33             -right清除右侧元素对当前元素的影响
 34             -both清除两侧影响中对该元素的位置影响最大的
 35         原理：
 36             设置清除浮动之后，浏览器会自动为元素添加一个上外边距，>    使其不受浮动元素的影响
 37  */      
 38     </style>  
 39 </head>  
 40 <body>        
 41     <div class="box1"></div>
 42     <div class="box2"></div>    
 43     <div class="box3"></div>    
 44 </body>  
 45 </html>       
~                                                                      
~
笨鸟先飞