CSS float属性总结

1.标明 float 之后，比如是float: left;元素就按照顺序靠左排列。一旦发现排不下就换行排列。 

1. .div_float  
2.         {  
3.             width:40px;  
4.             height: 20px;  
5.             margin: 0 2px;  
6.             background-color: Red;  
7.             float: left;  
8.             border: 1px solid gray;  
9.         }  
10.         .div_container  
11.         {  
12.             200px;  
13.             height: 100px;  
14.             margin: 0 10px;  
15.             border: 1px solid gray;  
16.         }  
17. <div class="div_container">  
18.          <div class="div_float">  
19.             1  
20.         </div>  
21.         <div class="div_float">  
22.             2  
23.         </div>  
24.         <div class="div_float">  
25.             3  
26.         </div>  
27.         <div class="div_float">  
28.             4  
29.         </div>  
30.         <div class="div_float">  
31.             5  
32.         </div>  
33.         <div class="div_float">  
34.             6  
35.         </div>  
36.         <div class="div_float">  
37.             7  
38.         </div> 
39.  
40.     </div> 

2.float之前如果有一个块状元素，则根据块状元素的特性，float会另起一行。 

1. <style type="text/css"> 
2.         .block_elm 
3.         { 
4.             display: block; 
5.             width:40px; 
6.             height: 20px; 
7.             background-color: Orange; 
8.         } 
9.         .div_float 
10.         { 
11.             width:40px; 
12.             height: 20px; 
13.             margin: 0 2px; 
14.             background-color: Red; 
15.             float: left; 
16.             border: 1px solid gray; 
17.         } 
18.  
19.         .div_container 
20.         { 
21.             width:200px; 
22.             height: 100px; 
23.             margin: 0 10px; 
24.             border: 1px solid gray; 
25.         } 
26.     </style> 
27.     <div class="div_container"> 
28.         <span class="block_elm"></span> 
29.         <div class="div_float"> 
30.             1 
31.         </div> 
32.         <div class="div_float"> 
33.             2 
34.         </div> 
35.         <div class="div_float"> 
36.             3 
37.         </div> 
38.         <div class="div_float"> 
39.             4 
40.         </div> 
41.         <div class="div_float"> 
42.             5 
43.         </div> 
44.         <div class="div_float"> 
45.             6 
46.         </div> 
47.         <div class="div_float"> 
48.             7 
49.         </div> 
50.     </div> 

 

3.float之前如果有一个内联元素，则比较复杂。通常，先把内联元素安置好，然后在往内联元素同一行的左侧插入float，如果空间不够了，就写在内联元素下方，直到写不下了，换行开始显示其他的。 

1. <style type="text/css"> 
2.         .inline_elm 
3.         { 
4.             background-color: Orange; 
5.         } 
6.         .div_float 
7.         { 
8.             width:40px; 
9.             height: 20px; 
10.             margin: 0 2px; 
11.             background-color: Red; 
12.             float: left; 
13.             border: 1px solid gray; 
14.         } 
15.         .div_container 
16.         { 
17.             width:200px; 
18.             height: 100px; 
19.             margin: 0 10px; 
20.             border: 1px solid gray; 
21.         } 
22.     </style> 
23. <div class="div_container"> 
24.         <span class="inline_elm">1234</span> 
25.         <div class="div_float"> 
26.             1 
27.         </div> 
28.         <div class="div_float"> 
29.             2 
30.         </div> 
31.         <div class="div_float"> 
32.             3 
33.         </div> 
34.         <div class="div_float"> 
35.             4 
36.         </div> 
37.         <div class="div_float"> 
38.             5 
39.         </div> 
40.         <div class="div_float"> 
41.             6 
42.         </div> 
43.         <div class="div_float"> 
44.             7 
45.         </div> 
46.     </div> 

 

4.float之后如果有一个内联元素，则比较复杂。它会见缝插针的写。写不下才会换一行。 

1. <div class="div_container"> 
2.         <div class="div_float"> 
3.             1 
4.         </div> 
5.         <div class="div_float"> 
6.             2 
7.         </div> 
8.         <div class="div_float"> 
9.             3 
10.         </div> 
11.         <div class="div_float"> 
12.             4 
13.         </div> 
14.         <div class="div_float"> 
15.             5 
16.         </div> 
17.         <div class="div_float"> 
18.             6 
19.         </div> 
20.         <div class="div_float"> 
21.             7 
22.         </div> 
23.       <span class="inline_elm">1</span> 
24.     </div> 

 

5.float之后如果有一个块级元素，则无视float，按本来的位置显示，但是块级元素中的文字则会写在float元素下方。 

1. <div class="div_container"> 
2. <div class="div_float"> 
3. 1 
4. </div> 
5. <div class="div_float"> 
6. 2 
7. </div> 
8. <div class="div_float"> 
9. 3 
10. </div> 
11. <div class="div_float"> 
12. 4 
13. </div> 
14. <div class="div_float"> 
15. 5 
16. </div> 
17. <div class="div_float"> 
18. 6 
19. </div> 
20. <div class="div_float"> 
21. 7 
22. </div> 
23. <span class="block_elm">1</span> 

 

6.float的元素，如果position不设置的话，默认是static，无视top，left等属性。但是如果将position设置为absolute，relative，fixed则可以对top等属性做出响应。

不设定postion之前。

设定postion为 absolute，relative，fixed后。    

1. <div class="div_container"> 
2.         <div class="div_float"> 
3.             1 
4.         </div> 
5.         <div class="div_float"> 
6.             2 
7.         </div> 
8.         <div class="div_float"> 
9.             3 
10.         </div> 
11.         <div class="div_float"  style="position: absolute; top: 0px; left: 0px;"> 
12.             4 
13.         </div> 
14.         <div class="div_float"> 
15.             5 
16.         </div> 
17.         <div class="div_float"> 
18.             6 
19.         </div> 
20.         <div class="div_float" style="position: relative; top: 10px; left: -10px;"> 
21.             7 
22.         </div> 
23.         <div class="div_float" style="position: fixed; top: 100px; left: 100px;"> 
24.             8 
25.         </div> 
26.         <div class="div_float"> 
27.             9 
28.         </div> 
29.     </div> 

 

7，float的元素依次浮动到最左边，除非容器宽度不允许它再float，否则它不会换行。如果要强行设置某个float元素换行，即无视之前的float的元素，重新把自己当做首个float的元素漂浮，只需要加入style="clear:left;"。 clear 属性规定元素的哪一侧不允许其他浮动元素。   

1. <div class="div_container"> 
2.        <div class="div_float"> 
3.            1 
4.        </div> 
5.        <div class="div_float"> 
6.            2 
7.        </div> 
8.        <div class="div_float"> 
9.            3 
10.        </div> 
11.        <div class="div_float" style="clear: left;"> 
12.            4 
13.        </div> 
14.        <div class="div_float"> 
15.            5 
16.        </div> 
17.        <div class="div_float"> 
18.            6 
19.        </div> 
20.        <div class="div_float" style="clear: left;"> 
21.            7 
22.        </div> 
23.        <div class="div_float"> 
24.            8 
25.        </div> 
26.        <div class="div_float"> 
27.            9 
28.        </div> 
29.    </div>