DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS浮動的3個特性(高手繞行)
CSS浮動的3個特性(高手繞行)
編輯:CSS詳解     

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: 300px;
13             height: 200px;
14             padding: 50px;
15             margin: 50px;
16             background: #ccf;
17         }
18         .inner{
19             width: 100px;
20             height: 100px;
21             background: #fcc;
22             float: right;
23         }
24     </style>
25 </head>
26 <body>
27     <div class='box'>
28         <div class='inner'>浮動元素</div>
29     </div>
30 </body>
31 </html>
 

效果圖:

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         .box{
12             width: 400px;
13             height: 200px;
14             padding: 50px;
15             margin: 50px;
16             background: #ccf;
17         }
18         .inner{
19             width: 100px;
20             height: 100px;
21             background: #fcc;
22             float: left;
23         }
24         .notfloat{
25             width: 200px;
26             height: 200px;
27             background: #cfc;
28         }
29     </style>
30 </head>
31 <body>
32     <div class='box'>
33         <div class='inner'>浮動元素</div>
34         <div class='notfloat'>浮動元素後面的塊級元素的內容會向此浮動元素的外邊距靠齊。
                    邊框和背景卻忽略浮動元素而向上一個(這二為為父元素)任意非浮動元素靠齊

       </div>
35     </div>
36 </body>
37 </html>
 

效果圖:

3.  浮動元素後面的內聯元素會向此浮動元素的外邊距靠齊。

代碼示例:

 
 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: 400px;
13             height: 200px;
14             padding: 50px;
15             margin: 50px;
16             background: #ccf;
17         }
18         .inner{
19             width: 100px;
20             height: 100px;
21             background: #fcc;
22             float: left;
23         }
24         .notfloat{
25             background: #cfc;
26         }
27     </style>
28 </head>
29 <body>
30     <div class='box'>
31         <div class='inner'>浮動元素</div>
32         <span class='notfloat'> 
33             浮動元素後面的內聯元素會向此浮動元素的外邊距靠齊
34         </span>
35     </div>
36 </body>
37 </html>        
 

效果圖:

For My Lover, CC!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved