CSS学习笔记（1）--浮动

总结：浮动只能在脱离文档流的当前位置向上浮动，不能像定位一样到处乱跑。

清除浮动，设置一个类.clear{clear:both;}

1.没有浮动，都独占一行：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #div1{
 8             width:50px;
 9             height: 50px;
10             background: #f00;
11             /*float: left;*/
12         }
13         #div2{
14             width: 70px;
15             height: 70px;
16             background: #00f;
17             /*float: left;*/
18         }
19         #div3{
20             width: 100px;
21             height: 100px;
22             background: #0f0;
23             /*float: left;*/
24         }
25     </style>
26 </head>
27 <body>
28     <div id="div1"></div>
29     <div id="div2"></div>
30     <div id="div3"></div>
31 </body>
32 </html>

2.红色浮动，后两个顶上来：

 1 <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             float: left;
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             /*float: left;*/
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             /*float: left;*/
19         }
20     </style>

3.红色、蓝色浮动，绿色顶上来，红蓝在上面一层先后排列：

 1 <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             float: left;
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             /*float: left;*/
19         }
20     </style>

4.全部浮动，都在上面一层，先后排列：

 1     <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             float: left;
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             float: left;
19         }
20     </style>

5.只蓝色浮动，上面是红色独占一行，绿色的顶到蓝色原来的位置，蓝色到上一层：

 1     <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             /*float: left;*/
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             /*float: left;*/
19         }
20     </style>

6.蓝色和绿色浮动，都在第二列先后排布：

 1     <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             /*float: left;*/
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             float: left;
19         }
20     </style>

7.红蓝绿都浮动，绿色加一个“清除左侧”，意思是，不允许左侧有东西，就跑去下一行了（清除两侧效果一样，因为包含了左侧）：

 1     <style>
 2         #div1{
 3             width:50px;
 4             height: 50px;
 5             background: #f00;
 6             float: left;
 7         }
 8         #div2{
 9             width: 70px;
10             height: 70px;
11             background: #00f;
12             float: left;
13         }
14         #div3{
15             width: 100px;
16             height: 100px;
17             background: #0f0;
18             float: left;
19             clear: left;
20         }
21     </style>