CSS浮动 

 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:orange;
 11         float:right;
 12     }        
 13     .box2{   
 14         width:100px;
 15         height:100px;
 16         background-color:green;
 17         float:right;
 18     }        
 19     .box3{   
 20         width:100px;
 21         height:100px;
 22         background-color:yellow;
 23         float:right;
 24     }        
 25     .s1{     
 26         background-color:red;
 27         width:100;
 28         height:100px;
 29         float:left;
 30              
 31     }        
 32     </style> 
 33 </head>      
 34 <body>       
 35     <!--浮动可以是一个元素向其父元素的左侧和右侧移动
 36         使用float 属性来设置元素的浮动
 37         可选值：
 38             -none默认值，元素不浮动
 39             -left元素向有浮动
 40             -right元素向右浮动
 41         注意：元素设置浮动之后，水平布局的等式便不需要强制成立
 42             元素设置浮动以后，会完全从文档流中脱离，不在占用高文档>    流的位置，所以元素下面还在文档流中的元素会自动向上移动
 43         浮动的特点：
 44             -1.浮动元素完全脱离文档流
 45             -2.设置浮动后元素会向父元素的左侧或者右侧移动
 46             -3.浮动元素默认不会从父元素中工艺处
 47             -4.浮动元素想做向右移动式，不会超过它前面的其他浮动元素
 48             -5.如果浮动元素的杭冕是一个没有浮动的块元素，则浮动元素
    无法向上移动
 49             -6.浮动元素不会超过它上面的浮动的兄弟元素，最多就是一眼
    高(在垂直方向上)
 50              
 51         浮动的其他特点：
 52             脱离文档流的特点：
 53                 块元素
 54                 -1.块元素不再独占页面的一行
 55                 -2.脱离文档流后，块元素的高度和宽度都被内容撑开
 56                 行内元素：
 57                 -1.行内元素脱离文档流后会变成块元素，特点和块元素一
    样
 58             脱离文档流后，不需要在区分块元素和行内元素
 59         浮动之后元素的类型就变成了内联块元素,不会沾满父元素的宽度
 60     -->     
 61     <div class="box1"></div>
 62     <div class="box2"></div>
 63     <div class="box3"></div>
 64     <span class="s1">我是span</span>
 65 </body>
 66 </html>

posted @ 2020-11-13 20:43  zou-ting-rong  阅读(86)  评论(0)  编辑  收藏  举报