浮动

一、浮动的一些性质

1.浮动的元素脱离标准流，没有标准流的行块之分了

脱离标准流的三种方法：

浮动：

1 float: left;

绝对定位：

1 position: absolute;

固定定位：

1 position: fixed;

浮动的元素已经脱离了标准流，所以没有inline、block之分了。

span在标准流中是一个经典的行内元素，但是浮动了，就可以不转块直接设置宽度、高度了

1 <span class="no1">1</span>

1 .no1 {
2     float: left;
3     width: 300px;
4     height: 50px;
5     background-color: orange;      
6 }

div在标准流中是一个经典的块级元素，不设置宽度在标准流中是自动撑满父元素的width。但是浮动了，就不自动撑满了，而是自动收缩了，收缩为内部文字的大小了：

2.依次贴边

左浮动：

父盒子的左边框内部←1←2←3←4

如果之前的兄弟已经不足以容纳自己，比如4没有足够的空间并排了，那么将依次寻找3、2、1、父盒子的边框去贴

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             div{
12                 width: 600px;
13                 height: 400px;
14                 border: 10px solid gray;
15             }
16             .no1{
17                 float: left;
18                 width: 50px;
19                 height: 300px;
20                 background-color: orange;
21             }
22             .no2{
23                 float: left;
24                 width: 50px;
25                 height: 110px;
26                 background-color: green;
27             }
28             .no3{
29                 float: left;
30                 width: 470px;
31                 height: 100px;
32                 background-color: skyblue;
33             }
34             .no4{
35                 float: left;
36                 width: 50px;
37                 height: 100px;
38                 background-color: pink;
39             }
40         </style>
41     </head>
42     <body>
43         <div>
44             <p class="no1">1</p>
45             <p class="no2">2</p>
46             <p class="no3">3</p>
47             <p class="no4">4</p>
48         </div>
49         
50     </body>
51 </html>

但是不钻：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .box {
12                 width: 600px;
13                 height: 400px;
14                 margin: 100px auto;
15                 border: 1px solid gray;
16             }
17             .box p {
18                 float: left;
19                 width: 190px;
20                 height: 40px;
21                 background-color: skyblue;
22                 margin-right: 10px;
23                 margin-bottom: 10px;
24             }
25             .box .no1 {
26                 height: 90px;
27             }
28         </style>
29     </head>
30     <body>
31         <div class="box">
32             <p class="no1">1</p>
33             <p>2</p>
34             <p>3</p>
35             <p>4</p>
36             <p>5</p>
37         </div>
38     </body>
39 </html>

View Code

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .mobile{
12                 width: 1210px;
13                 height: 474px;
14                 margin: 100px auto;
15                 border-top: 1px solid red;
16             }
17             .mobile .grid{
18                 float: left;
19                 border-bottom: 1px solid red;
20                 border-right: 1px solid red;
21             }
22             .mobile .no3,.mobile .no4,.mobile .no5,.mobile .no6{
23                 width: 219px;
24                 height: 117px;
25             }
26             .mobile .no8,.mobile .no9{
27                 width: 219px;
28                 height: 236px;
29             }
30             .mobile .no1,.mobile .no7{
31                 width: 330px;
32                 height: 236px;
33                 border: none;
34             }
35             .mobile .no2{
36                 width: 440px;
37                 height: 236px;
38                 border: none;
39             }
40             .mobile .no10,.mobile .no11{
41                 width: 219px;
42                 height: 236px;
43             }
44             .no1{
45                 background-color: pink;
46             }
47             .no2{
48                 background-color: skyblue;
49             }
50             .no7{
51                 background-color: orange;
52             }
53         </style>
54     </head>
55     <body>
56         <div class="mobile">
57             <div class="grid no1">1</div>
58             <div class="grid no2">2</div>
59             <div class="grid no3">3</div>
60             <div class="grid no4">4</div>
61             <div class="grid no5">5</div>
62             <div class="grid no6">6</div>
63             <div class="grid no7">7</div>
64             <div class="grid no8">8</div>
65             <div class="grid no9">9</div>
66             <div class="grid no10">10</div>
67             <div class="grid no11">11</div>
68         </div>
69     </body>
70 </html>

View Code

3.浮动后竖直方向上的margin塌陷现象消失

margin塌陷是标准流的事，因为浮动脱标了，就没有这个事了

4.让出了标准流

1 <div class="box1"></div>  → 浮动
2 <div class="box2"></div> → 没有浮动

橙色盒子浮动了，让出了标准流的位置，蓝色盒子渲染在左上角，被橙色盒子压住了。

不过，这个性质没什么太大作用，一般制作压盖效果都是使用定位，而不是用浮动的这个小技巧

5.字围

二、清除浮动

1.父元素不能被浮动的子元素撑出高

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .box {
12                 width: 600px;
13                 border: 10px solid #333;
14             }
15             .no1{
16                 float: left;
17                 height: 600px;
18                 width: 100px;
19                 background-color: skyblue;
20             }
21             .no2{
22                 float: left;
23                 height: 400px;
24                 width: 50px;
25                 background-color: orange;
26             }
27         </style>
28     </head>
29     <body>
30         <div class="box">
31             <div class="no1"></div>
32             <div class="no2"></div>
33         </div>
34     </body>
35 </html>

View Code

父元素在标准流的情况下才会被子元素撑出高

解决方法：overflow: hidden;

2.有高度的盒子能够管住自己内部的浮动元素

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .box1{
12                 width: 800px;
13                 height: 200px;
14                 border: 10px solid gray;
15             }
16             .box2{
17                 clear: both;
18                 width: 800px;
19                 height: 200px;
20                 border: 10px solid gray;
21             }
22             p{
23                 float: left;
24                 width: 100px;
25                 height: 60px;
26                 background-color: greenyellow;
27                 margin-right: 10px;
28             }
29         </style>
30     </head>
31     <body>
32         <div class="box1">
33             <p>1</p>
34             <p>2</p>
35             <p>3</p>
36             <p>4</p>
37         </div>
38         <div class="box2">
39             <p>1</p>
40             <p>2</p>
41             <p>3</p>
42         </div>
43     </body>
44 </html>

View Code

3.清除浮动

3.1 clear:both;

给后面的盒子加上，它的值可以是left、right、both

缺点：

box还是没有高

margin失效

3.2 隔墙法

 1 <div class="box1">
 2     <p>1</p>
 3     <p>2</p>
 4     <p>3</p>
 5     <p>4</p>
 6 </div>
 7 
 8 <div class="cl h20"></div>
 9 
10 <div class="box2">
11     <p>1</p>
12     <p>2</p>
13     <p>3</p>
14 </div>

在网页中两个非常大的部分，隔一堵墙，把两部分的浮动都关在里面，不相互影响

ps：margin依旧失效，但可以用墙的高度来模拟间隔。

但是盒子依然没有高

3.3 内墙法

 1 <div class="box1">
 2     <p>1</p>
 3     <p>2</p>
 4     <p>3</p>
 5     <p>4</p>
 6     <div class="cl"></div>  /*cl就是 clean: both;*/
 7 </div>
 8     
 9 <div class="box2">
10     <p>1</p>
11     <p>2</p>
12     <p>3</p>
13     <div class="cl"></div>
14 </div>

现在margin好用了，并且盒子也有高了，但是这样书写会很麻烦

3.4 overflow: hidden;

 1 <div class="box1">  → 这个盒子没高，就写上overflow:hidden;
 2     <p>1</p>
 3     <p>2</p>
 4     <p>3</p>
 5     <p>4</p>
 6 </div>
 7     
 8 <div class="box2">  → 这个盒子没高，就写上overflow:hidden;
 9     <p>1</p>
10     <p>2</p>
11     <p>3</p>
12 </div>

清除浮动总结：

　　1.给内部有浮动的父盒子加上 overflow: hidden;

　　2.在两个大部分之间隔外墙

posted on 2017-08-03 16:06 十言九妄空荡荡阅读(191) 评论(0) 收藏举报