标签：浮动 float 100px height width 小宝 background
浮动（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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。