10-浮动

程序员文章站 2022-06-24 08:23:15

浮动 float： none：表示不浮动，默认 left：表示左浮动 right；表示右浮动浮动的四大特性 1、浮动的元素脱标红色盒子脱离了标准文档流，所以绿色盒子顶了上去，并且浮动的盒子层级提高。浮动的元素span是可以设置宽高的。所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元 ......

浮动

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>

10-浮动

浮动的四大特性

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>

10-浮动

红色盒子脱离了标准文档流，所以绿色盒子顶了上去，并且浮动的盒子层级提高。浮动的元素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>

10-浮动

如果父元素有足够的空间，那么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>

10-浮动

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>

10-浮动

浮动遵循的原则：

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

为何要清除浮动

看一个例子：

 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>

10-浮动

如果不给父盒子一个高度，那么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>

10-浮动

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>

10-浮动

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>

10-浮动

作者：流浪者

日期：2019-08-31

上一篇： [小程序]微信小程序获取位置展示地图并标注信息

下一篇：机器视觉-python基础入门

10-浮动

浮动

浮动的四大特性

1、浮动的元素脱标

2、浮动的元素互相贴靠

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

4、收缩的效果

为何要清除浮动

清除浮动的方法

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

2、clear：both

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

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

原生JavaScript实现Tooltip浮动提示框特效

CSS 浮动清理，不使用 clear:both标签

利用jQuary实现文字浮动提示效果示例代码

如何清除网页上的不明的浮动广告和漂浮的图片

css盒子布局,浮动布局以及显影与简单的动画

liststyletype小图标怎么设置（clear清除浮动代码）

Canvas绘制浮动球效果的示例

html/css中float浮动的用法

jquery toolbar与网页浮动工具条具体实现代码

详解排名浮动操作心得体会