其他分享
首页 > 其他分享> > 浮动

浮动

作者:互联网

浮动(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