css中的float和position

1.float

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>float</title>
 6 
 7     <style>
 8         body{
 9             border-style:solid;
10             border-size:3px;
11         }
12         .div1{
13             width:100px;
14             height:100px;
15             background-color:red;
16             float:left;
17         }
18         .div2{
19             width:100px;
20             height:100px;
21             background-color:green;
22             float:left;
23         }
24         .div3{
25             width:200px;
26             height:200px;
27             background-color:gray;
28         }
29     </style>
30 </head>
31 <body>
32 <!
33     目的：如何在一行显示多个div元素
34 --正常文档流：将元素（标签）在进行排版布局的时候按着 从上到下 从左到右的顺序排版的一个布局流
35     脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局
36 float：浮动,最好用float，如果有文本，会被挤出去。对于文本来说是不完全文档流
37 position:absolute fixed定位（完全脱离）
38 -->
39 <div class="div1"></div>
40 <div class="div2"></div>
41 <div class="div3"></div>
42 </body>
43 </html>
View Code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>clear</title>
 6 
 7     <style>
 8         .div1{
 9             width:100px;
10             height:100px;
11             background-color:red;
12             float:left;
13         }
14         .div2{
15             width:100px;
16             height:100px;
17             background-color:green;
18             float:left;
19         }
20         .div3{
21             width:200px;
22             height:200px;
23             background-color:gray;
24             clear:both;
25         }
26     </style>
27 </head>
28 <body>
29 <!--clear就是清除float元素，可以设置左右两边不能有浮动元素-->
30     <div class="div1"></div>
31     <div class="div2"></div>
32     <div class="div3"></div>
33 </body>
34 </html>
View Code

2.position

　　fixed
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>position</title>
 6 
 7     <style>
 8         .div1{
 9             height:1500px;
10             background-color:green;
11         }
12         .div2{
13             height:1500px;
14             background-color:yellow;
15         }
16         a{
17             position:fixed;
18             bottom:20px;
19             right:20px;
20         }
21     </style>
22 </head>
23 <body>
24     <div class="div1"></div>
25     <div class="div2"></div>
26     <!--position:absolute fixed 定位（完全）-->
27     <a >返回顶部</a>
28 </body>
29 </html>
View Code

 

posted @ 2017-11-09 10:10  物是人非12758  阅读(139)  评论(0)  编辑  收藏  举报