一、浮动的一些性质
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>
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>
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>
父元素在标准流的情况下才会被子元素撑出高
解决方法：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>
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.在两个大部分之间隔外墙
扫一扫
3587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
