浮动
作者：互联网
浮动（float）
1.标准流（文档流 普通流）
一个网页的标签元素正常是从上往下，从左到右排列，块级元素独占一行，行内元素按照顺序依次前后排列
三种布局 标准流 浮动 定位
2.什么是浮动
元素设置了浮动属性会脱离标准流控制（脱标）。
float:left / float:right
3.浮动特性
1）脱离标准流、不占位置、会影响标准流
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8 .box1{
9 float: left;
10 height: 100px;
11 width: 200px;
12 background-color:pink;
13 }
14 .box2{
15 height: 200px;
16 width: 400px;
17 background-color: #c1c1c1;
18 }
19
20 </style>
21 </head>
22 <body>
23 <div class="box1">第一个div</div>
24 <div class="box2">第二个div</div>
25 </body>
26 </html>
效果展示
2）子盒子浮动，不会压住父盒子的padding和margin
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <style>
8
9 .parent{
10 height: 300px;
11 padding: 50px;
12 margin:100px;
13 border:2px solid red;
14 }
15
16 .box1{
17 float: left;
18 height: 100px;
19 width: 200px;
20 background-color:pink;
21 }
22 .box2{
23 float: left;
24 height: 200px;
25 width: 400px;
26 background-color: #c1c1c1;
27 }
28
29 </style>
30 </head>
31 <body>
32 <div class="parent">
33 <div class="box1">第一个div</div>
34 <div class="box2">第二个div</div>
35 </div>
36
37 </body>
38 </html>
效果展
3）浮动元素改变元素的模式，无论行内元素还是块级元素，设置浮动以后都具有行内块元素特性
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>Document</title>
6 <style>
7 div{
8 float: left;
9 width: 200px;
10 height: 50px;
11 background: skyblue;
12 }
13 span{
14 float: left;
15 width: 200px;
16 height: 50px;
17 background: yellowgreen;
18 }
19 </style>
20 </head>
21 <body>
22 <div>这是一个div标签</div>
23 <span>这是一个span标签</span>
24 </body>
25 </html>
效果展示
浮动可以做的一些东西：
1）字围现象：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul,ol{
12 list-style: none;
13 }
14 .box{
15 width: 500px;
16 border: 1px solid red;
17 }
18 .box1{
19 float: left;
20 margin: 0 10px 10px 0;
21 }
22 .box2{
23 font-size: 14px;
24 line-height: 22px;
25 background: lightblue;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="box">
31 <div class="box1">
32 <img src="img/sxb.png" alt="" />
33 </div>
34 <div class="box2">宋小宝本名宋宝利，1981年1月5日生于吉林省通化市辉南县，演员，赵本山的第32个徒弟。2011年因参演辽宁卫视春节晚会与师父赵本山合作的小品《相亲》而获得关注。
35 2015年7月25日，宋小宝参加东方卫视《欢乐喜剧人》总决赛。
36 1997年，宋小宝16岁，没有一技之长，没有人拉扯一把，宋小宝只能在自己身上挂上牌子：零活，跑到劳务市场等人挑。而他身材瘦小，最后落到手的工作只能去当洗碗工。每个月360块钱，正常那时候洗碗都是给300块钱，他每天多要2块，一个月能多60块。 宋小宝当时只能住3块钱一天的小旅馆，每天和一大堆人挤在一起，那气味就甭提了。
37 宋小宝19岁那年，有二人转团体下乡演出，爱凑热闹的宋小宝看着舞台上的二人转演员唱得好，他也跑上去边唱边扭，结果被二人转演员焦小龙看中，成了他的徒弟。宋小宝开始学习二人转，一年出师，随后开始在鞍山、本溪等地演出。
38 2007年，正在吉林一家二人转剧场演出的宋小宝被老板叫到了赵本山面前，赵本山说，跟我走吧，给我当徒弟。原来这家二人转剧场的老板是闫学晶的丈夫，也是赵本山的好朋友，很多二人转演员拜师赵本山之前，都是在这家剧场压轴演出。于是，宋小宝就成了赵本山的徒弟。
39 到了本山传媒，赵本山立即让他演《关东大先生》里的一个小偷儿。但真正让宋小宝成名的还是黑龙江卫视的《本山快乐营》，当时刘小光因为其他演出要离开一段时间，宋小宝正好顶了这个空缺参演。
40 2011年兔年辽视春晚上，赵本山携宋小宝、赵海燕演出了小品《相亲》，结果这部小品成全了宋小宝，进入本山传媒四年的宋小宝终于有机会在舞台上完整地展现自己。</p>
41 </div>
42 </body>
43 </html>
效果展示
2）解决margin塌陷问题
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul,ol{
12 list-style: none;
13 }
14 .box{
15 width: 200px;
16 height: 300px;
17 padding: 0px 300px 0px 0px;
18 border: 1px solid red;
19 }
20 .box1{
21 float: left;
22 width: 100px;
23 height: 100px;
24 margin: 0 20px 40px 0;
25 background: skyblue;
26 }
27 .box2{
28 float: left;
29 width: 100px;
30 height: 100px;
31 margin: 60px 20px 0 0;
32 background: skyblue;
33 }
34 </style>
35 </head>
36 <body>
37 <div class="box">
38 <div class="box1"></div>
39 <div class="box2"></div>
40 </div>
41 </body>
42 </html>
效果展示
浮动产生的问题：
不能撑高父元素
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul,ol{
12 list-style: none;
13 }
14 .box{
15 width: 800px;
16 /* height: 100px; */
17 border: 10px solid red;
18 }
19 .box p{
20 float: left;
21 width: 100px;
22 height: 100px;
23 margin-right: 10px;
24 background: yellowgreen;
25 }
26 </style>
27 </head>
28 <body>
29 <div class="box">
30 <p></p>
31 <p></p>
32 <p></p>
33 <p></p>
34 </div>
35 <div class="box">
36 <p></p>
37 <p></p>
38 <p></p>
39 <p></p>
40 </div>
41 </body>
42 </html>
效果展示：
标签：浮动,float,100px,height,width,小宝,background 来源： https://www.cnblogs.com/Changxin-chen/p/12795295.html