10-浮动

最新推荐文章于 2024-04-29 20:06:38 发布

anfagun7857

最新推荐文章于 2024-04-29 20:06:38 发布

阅读量103

点赞数

原文链接：http://www.cnblogs.com/897463196-a/p/11439390.html

版权

浮动

float：

　　none：表示不浮动，默认

　　left：表示左浮动

　　right；表示右浮动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         *{
 8             padding: 0px;
 9             margin: 0px;
10         }
11         .box1{
12             width: 200px;
13             height: 200px;
14             background-color: red;
15             float: left;
16         }
17         .box2{
18             width: 200px;
19             height: 200px;
20             background-color: green;
21             float: right;
22         }
23         span{
24             width: 200px;
25             height: 200px;
26             background-color: yellow;
27             float: left;
28         }
29     </style>
30 
31 </head>
32 <body>
33 
34 <div class="box1"></div>
35 <div class="box2"></div>
36 <span>流浪者</span>
37     
38 </body>
39 </html>

浮动的四大特性

1、浮动的元素脱标

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         *{
 8             padding: 0px;
 9             margin: 0px;
10         }
11         .box1{
12             width: 200px;
13             height: 200px;
14             background-color: red;
15             float: left;
16         }
17         .box2{
18             width: 400px;
19             height: 400px;
20             background-color: green;
21         }
22         span{
23             width: 200px;
24             height: 200px;
25             background-color: yellow;
26             float: left;
27         }
28     </style>
29 
30 </head>
31 <body>
32 
33 <div class="box1"></div>
34 <div class="box2"></div>
35 <span>流浪者</span>
36     
37 </body>
38 </html>

红色盒子脱离了标准文档流，所以绿色盒子顶了上去，并且浮动的盒子层级提高。浮动的元素span是可以设置宽高的。

所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

2、浮动的元素互相贴靠

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         *{
 8             padding: 0px;
 9             margin: 0px;
10         }
11         .box1{
12             width: 200px;
13             height: 200px;
14             background-color: red;
15             float: left;
16         }
17         .box2{
18             width: 400px;
19             height: 400px;
20             background-color: green;
21             float: left;
22         }
23         .box3{
24             width: 100px;
25             height: 500px;
26             background-color: yellow;
27             float: left;
28         }
29     </style>
30 
31 </head>
32 <body>
33 
34 <div class="box1"></div>
35 <div class="box2"></div>
36 <div class="box3"></div>
37     
38 </body>
39 </html>

如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

3、浮动的元素有字围效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7        *{
 8             padding: 0;
 9             margin: 0;
10         }
11         div{
12             float: left;
13         }
14 
15     </style>
16 
17 </head>
18 <body>
19 
20 <div>
21     <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=167219548,1510840028&fm=26&gp=0.jpg" alt="" width="50px" height="100px">    
22 </div>
23 <p>
24         123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
25 </p>
26     
27 </body>
28 </html>

4、收缩的效果

收缩：一个浮动的元素，如果不设置宽度，那么他会自动收缩为内容的宽度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         div{
 8             background-color: green;
 9             float: left;
10         }
11 
12     </style>
13 
14 </head>
15 <body>
16 
17 <div>流浪者</div>
18     
19 </body>
20 </html>

浮动遵循的原则：

　　永远不要一个盒子单独浮动，要浮动就一起浮动；有浮动一定要清除浮动。

为何要清除浮动

看一个例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7        *{
 8             padding: 0;
 9             margin: 0;
10 
11         }
12         .father{
13             width: 1126px;
14             /*子元素浮动 父盒子一般不设置高度*/
15 
16             /*出现这种问题，我们要清除浮动带来影响*/
17             /*height: 300px;*/
18 
19         }
20         .box1{
21             width: 200px;
22             
23             height: 500px;
24             float: left;
25             background-color: red;
26         }
27         .box2{
28             width: 300px;
29             height: 200px;
30             float: left;
31             background-color: green;
32         }
33         .box3{
34             width: 400px;
35             float: left;
36             height: 100px;
37             background-color: blue;
38         }
39         .father2{
40             width: 1126px;
41             height: 600px;
42             background-color: purple;
43         }
44 
45     </style>
46 
47 </head>
48 <body>
49 
50 <div class="father">    
51         <div class="box1"></div>
52         <div class="box2"></div>
53         <div class="box3"></div>
54 
55 </div>
56 
57 <div class="father2"></div>
58     
59 </body>
60 </html>

如果不给父盒子一个高度，那么father2会顶上去，影响页面布局，所以说要给父盒子一个高度，清除浮动带来的影响。

清除浮动的方法

1、给父盒子设置高度（不建议）

一般用在导航栏。

2、clear：both

有三个值：

　　left：元素左边不允许有浮动元素

　　right：元素右边不允许有浮动元素

　　both：元素两边不允许有浮动元素

clear：both用法：给浮动元素后边加一个空的div元素，并且该元素不浮动，设置clear：both。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7        *{
 8             padding: 0;
 9             margin: 0;
10 
11         }
12         .father{
13             width: 1126px;
14 
15         }
16         .box1{
17             width: 50px;
18             height: 100px;
19             float: left;
20             background-color: red;
21         }
22         .box2{
23             width: 100px;
24             height: 100px;
25             float: left;
26             background-color: green;
27         }
28         .box3{
29             width: 400px;
30             float: left;
31             height: 100px;
32             background-color: blue;
33         }
34         .father2{
35             width: 1126px;
36             height: 200px;
37             background-color: purple;
38         }
39         .clear{
40             clear: both;
41         }
42 
43     </style>
44 
45 </head>
46 <body>
47 
48 <div class="father">    
49         <div class="box1"></div>
50         <div class="box2"></div>
51         <div class="box3"></div>
52         <!-- clear: both;清除浮动 -->
53         <div class="clear"></div>
54 
55 </div>
56 
57 <div class="father2"></div>
58     
59 </body>
60 </html>

3、伪元素清除法（常用）

给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden    # 这个和display：none；的区别在于这个占位置；而display：none；不占位置。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7        *{
 8             padding: 0;
 9             margin: 0;
10 
11         }
12         .father{
13             width: 1126px;
14 
15         }
16         .box1{
17             width: 50px;
18             height: 100px;
19             float: left;
20             background-color: red;
21         }
22         .box2{
23             width: 100px;
24             height: 100px;
25             float: left;
26             background-color: green;
27         }
28         .box3{
29             width: 400px;
30             float: left;
31             height: 100px;
32             background-color: blue;
33         }
34         .father2{
35             width: 1126px;
36             height: 200px;
37             background-color: purple;
38         }
39         .clearfix:after{
40             content: '.';
41             display: block;
42             height: 0;
43             visibility: hidden;
44             clear: both;
45         }
46 
47     </style>
48 
49 </head>
50 <body>
51 
52 <div class="father clearfix">    
53         <div class="box1"></div>
54         <div class="box2"></div>
55         <div class="box3"></div>
56 </div>
57 
58 <div class="father2"></div>
59     
60 </body>
61 </html>

4、overflow：hidden清除法（常用）

overflow：hidden规定当内容溢出元素框时发生的事情。

给浮动元素的父元素直接设置overflow：hidden即可。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7        *{
 8             padding: 0;
 9             margin: 0;
10 
11         }
12         .father{
13             width: 1126px;
14             overflow: hidden;
15         }
16         .box1{
17             width: 50px;
18             height: 100px;
19             float: left;
20             background-color: red;
21         }
22         .box2{
23             width: 100px;
24             height: 100px;
25             float: left;
26             background-color: green;
27         }
28         .box3{
29             width: 400px;
30             float: left;
31             height: 100px;
32             background-color: blue;
33         }
34         .father2{
35             width: 1126px;
36             height: 200px;
37             background-color: purple;
38         }
39 
40     </style>
41 
42 </head>
43 <body>
44 
45 <div class="father">    
46         <div class="box1"></div>
47         <div class="box2"></div>
48         <div class="box3"></div>
49 </div>
50 
51 <div class="father2"></div>
52     
53 </body>
54 </html>