css：浮动的理解。

css默认的布局是将元素一个一个地往下排列下来，如果不采取浮动，将导致页面非常长。

下面我们通过做一个常见的网站布局，来说明浮动是怎么一回事。

希望的效果是:

 

 

 

步骤一、先把代码写一下，

 

例：

html内容：

 

[xhtml] view plaincopy
  1. <body >  
  2.    
  3.     <div id="head">  
  4.     head  
  5.     </div>      
  6.   
  7.     <div id="content">  
  8.     content  
  9.     </div>  
  10.   
  11.     <div id="sidebar">  
  12.     sidebar  
  13.     </div>      
  14.   
  15.     <div id="footer">  
  16.     footer  
  17.     </div>  
  18.   
  19.          <p>要多写几行字</p>  
  20. </body >  

 

css内容：

 

[css] view plaincopy
  1. body  
  2. {  
  3.     margin:0;  
  4.     border:0;  
  5. }  
  6.   
  7.   
  8. #head  
  9.     {  
  10.     width: 300px;  
  11.     height:50px;  
  12.     margin:10;  
  13.     border:1px solid #000;  
  14.     background: #0aa;  
  15.     }  
  16. #content  
  17.     {  
  18.     width: 200px;  
  19.     height:80px;  
  20.     margin:10;  
  21.     border:1px solid #000;  
  22.     background: #aa0;  
  23.     }  
  24.   
  25. #sidebar  
  26.     {  
  27.     width: 100px;  
  28.     height:80px;  
  29.     margin:10;  
  30.     border:1px solid #000;  
  31.     background: #afa;  
  32.     }  
  33.   
  34.   
  35. #footer  
  36.     {  
  37.     width: 300px;  
  38.     height:50px;  
  39.     margin:10;  
  40.     border:1px solid #000;  
  41.     background: #0aa;  
  42.     }  

 

效果如下：

 

 

 

步骤二、 

这不是我们想要的效果，我们想把siderbar块移到content块的右边。sidebar改成如下内容：

 #sidebar     {     float: right;     width: 100px;     height:80px;     margin:10;     border:1px solid #000;     background: #afa;     }

 

 得到的效果是：

 

或者是（改变浏览器的大小，sidebar位置会有变化）：

 

 

为什么sidebar设了浮动，但没有放在content的旁边？

讲解：

1、因为元素是按线性排列的，sidebar在我们的html文件中是第三个元素，把它设成浮动后，他也只在第三个元素原来应该在的位置处左右浮动，而不会跑到其他元素的位置浮动。

2、浮动元素后的元素（footer和<p>），如果浮动元素按线性排列所在的位置，能容下footer和<p>，则这些元素跟上来，

3、否则，就不跟上来，也就是找个能容的下他们的空地，也就是还在默认的自然流中的位置。

 

书上讲，浮动是元素从元素自然流中抽离出来，浮动元素之后的元素，环绕在浮动元素的周围，这句话的含义如上所述。

 

步骤三、

怎样达到我们想要的效果呢？

一个最简单的办法，是 #sidebar还是加上float: right的属性，然后颠倒下html文件中，content和sidebar的顺序。

动手做一做吧。

 

步骤四、

咦，什么是下面的效果，content和sidebar的上边距怎么不一致呢？

 

 

 margin的问题以后再讲。

 

步骤五、

posted on 2013-10-21 08:31  爱哎唉  阅读(251)  评论(0)    收藏  举报