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> 

C43D770644B647D083F204FBE551FDFA

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> 

 F9010E8CEB6144BAAD87EB45261A4F75

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> 

 

EE8208305ABB44B1AD4D9FBC9C9FAEFE

B2F3454047664742AFFEF3A263A38871

3204C09EC19B46D9ABDA3FC4E94B6E4B

55A2FBDEE31240198CA005BE29AE036F

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> 

 973DCF4F07964422BDE2EB4B0D5F9DC7

AB182EA1EA5F4D63A6C5A7F67FE89492

A0CB569E29E14E37A4B2F628333728EC

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

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

 F7A8B0A8C4A0423CAA740A2E44B94EEE

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

不设定postion之前。

39BC909586AC448BBE0296B88B96B581

设定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> 

 DB1A9FF3E6144F26BFCA956FCD4026BB

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> 

 CA2D1491FE114F1AAF2CD7479358C6D1



















本文转自cnn23711151CTO博客,原文链接: http://blog.51cto.com/cnn237111/1073068 ,如需转载请自行联系原作者