DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> CSS重要屬性之float學習心得(分享)
CSS重要屬性之float學習心得(分享)
編輯：關於CSS     


我們來看看CSS重要屬性--float。

以下內容分為如下小節：

1：float屬性

2：float屬性的特性   

　　2.1：float之文字環繞效果

　　2.2：float之父元素高度塌陷

3：清除浮動的方法

　　3.1：html法

　　3.2：css偽元素法

4：float去空格化

5：float元素塊狀化

6：float流體布局   

　　6.1：單側固定

　　6.2：DOM與顯示位置不同的單側固定

　　6.3：DOM與顯示位置相同的單側固定

　　6.4：智能布局

1：float屬性

  float，顧名思義是漂浮，浮動的意思。但是在css中，它被理解成浮動。float有四個屬性，即

CSS Code復制內容到剪貼板
  1. float:none;   
  2. float:left;   
  3. float:rightright;   
  4. float:inherit;  

比較常用的兩個屬性值是左浮動和右浮動。在接下來的分享中，只會拿左浮動作為例子。其他浮動屬性值與左浮動原理相同。

2：float屬性的特性

　　2.1：float之文字環繞效果

浮動的初衷就是為了文字環繞效果。

看如下代碼和demo。

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.     <div class="content"></div>  
  3.     <p>  
  4. Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!   
  5.         </p>  
  6.     </div>  
CSS Code復制內容到剪貼板
  1. .container {   
  2.   width: 300px;   
  3.   height: 300px;   
  4.   border: 1px solid black;   
  5. }   
  6. .container .content {   
  7.   float: left;   
  8.   width: 150px;   
  9.   height: 150px;   
  10.   background-color: lightpink;   
  11.   margin: 5px;   
  12. }  

content 元素設置了左浮動，使div元素脫離文檔流，文字在其周圍壞繞顯示。

　　2.2：float之父元素高度塌陷

以div元素為例。div元素的高度會通過內容自動撐開。也就是說，內容有多少，高度就有多高。但是當內部元素設置了float屬性之後，會是父元素高度塌陷。代碼和實例如下。

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.     <p>  
  3. Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!   
  4.     </p>  
  5. </div>  

如下，塌陷後css和demo。

CSS Code復制內容到剪貼板
  1. .container {   
  2.   width: 300px;   
  3.   border: 1px solid black;   
  4. }   
  5. .container p {   
  6.   float: left;   
  7. }  

3：清除浮動的方法

那麼問題來了，如果內部元素要設置浮動，那如何避免父元素高度塌陷的問題呢？

有同學肯定會想，直接在父元素設置高度不就可以了嗎？這在實際中是不行的。因為如果固定了父元素的高度，那如果之後想在其添加內容，不是又要去修改css代碼了，特麻煩。

那解決父元素高度塌陷有兩種方法。
　　
3.1：父元素底部添加空div，然後在添加屬性clear : both。

　　代碼如下。

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.             <p>  
  3.             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!   
  4.             </p>  
  5.             <div class="clearfix"></div>  
  6.         </div>  
CSS Code復制內容到剪貼板
  1. .container {   
  2.   width: 300px;   
  3.   border: 1px solid black;   
  4. }   
  5. .container p {   
  6.   float: left;   
  7. }   
  8. .container .clearfix {   
  9.   overflow: hidden;   
  10.   *zoom: 1;   
  11. }  

3.2：父元素設置偽類after。

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.             <p>  
  3.             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!   
  4.             </p>  
  5.         </div>  
CSS Code復制內容到剪貼板
  1. .container {   
  2.   width: 300px;   
  3.   border: 1px solid black;   
  4.   *zoom: 1;   
  5. }   
  6. .container p {   
  7.   float: left;   
  8. }   
  9. .container:after {   
  10.   content: "";   
  11.   display: table;   
  12.   clear: both;   
  13. }  

4：float元素去空格化

是什麼意思呢？在平時的編碼中，為了要符合HTML編碼規范，都會為html標簽添加縮進，達到美觀的效果。可是縮進時就會產生空格，也就是&nbsp;。當給元素設置左浮動時，元素本身左浮動，剩余的空格會被擠到最後，也就是上文所說的文字環繞效果。但是，要記住一點，&nbsp;和回車敲下的空格的效果略有不同。

5：float元素塊狀化

在為內聯元素設置浮動屬性之後，display屬性由inline變成block。並且可以為內聯元素設置寬高。使用float加width屬性可以實現一些簡單的固定寬度的布局效果。

6：float流體布局

　　6.1：單側固定，右側自適應的布局。

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.              <div class="left">左浮動+固定寬度</div>  
  3.              <div class="right">右邊自適應寬度+margin-left</div>  
  4.          </div>  
CSS Code復制內容到剪貼板
  1. .container{   
  2.     max-width:90%;   
  3.     margin:0 auto;   
  4. }   
  5.   
  6. .left{   
  7.     float:left;   
  8.     text-align:center;   
  9.     background-color: lightpink;   
  10.     width: 200px;   
  11.     height:300px;   
  12. }   
  13.   
  14. .rightright{   
  15.     background-color: lightyellow;   
  16.     margin-left:200px;   
  17.     height:300px;   
  18.     padding-left:10px;   
  19. }  

6.2：DOM與顯示位置不同的單側固定

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.              <div class="right">右浮動+固定寬度</div>  
  3.              <div class="left">左邊自適應寬度+margin-right</div>  
  4.          </div>  
CSS Code復制內容到剪貼板
  1. .container {   
  2.   max-width: 90%;   
  3.   margin: 0 auto;   
  4. }   
  5. .container .rightright {   
  6.   float: rightright;   
  7.   width: 200px;   
  8.   height: 200px;   
  9.   background-color: lightpink;   
  10. }   
  11. .container .left {   
  12.   background-color: lightyellow;   
  13.   margin-right: 200px;   
  14.   height: 300px;   
  15.   padding-left: 10px;   
  16. }  

也就是說，html元素與顯示在頁面上的元素位置不相同。

　　6.3：DOM與顯示位置相同的單側固定

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.             <div class="left-content">  
  3.                 <!-- 左浮動+width100% -->  
  4.                 <div class="left">margin-right</div>  
  5.             </div>  
  6.             <div class="right">左浮動+固定寬度+margin-left負值</div>  
  7.         </div>  
CSS Code復制內容到剪貼板
  1. .container {   
  2.   max-width: 90%;   
  3.   margin: 0 auto;   
  4. }   
  5. .container .rightright {   
  6.   float: left;   
  7.   width: 200px;   
  8.   height: 200px;   
  9.   background-color: lightpink;   
  10.   margin-left: -200px;   
  11.   height: 300px;   
  12. }   
  13. .container .left {   
  14.   background-color: lightyellow;   
  15.   margin-right: 200px;   
  16.   height: 300px;   
  17.   text-align: center;   
  18. }  

6.4：智能布局

所謂智能布局，就是兩欄都不需要設置寬度，寬度隨內容自適應。

XML/HTML Code復制內容到剪貼板
  1. <div class="container">  
  2.             <div class="left">  
  3.                 float+margin-right+自適應寬度   
  4.             </div>  
  5.             <div class="right">  
  6.                 display:table-cell  ---IE8+;   
  7.                 display:inline-block   ---IE7+;   
  8.                 自適應寬度   
  9.             </div>  
  10.         </div>  
CSS Code復制內容到剪貼板
  1. .container {   
  2.   max-width: 90%;   
  3.   margin: 0 auto;   
  4. }   
  5. .container .left {   
  6.   float: left;   
  7.   height: 300px;   
  8.   background-color: lightpink;   
  9. }   
  10. .container .rightright {   
  11.   display: table-cell;   
  12.   *display: inline-block;   
  13.   height: 300px;   
  14.   background-color: lightyellow;   
  15. }  
CSS Code復制內容到剪貼板
  1. .container {   
  2.   max-width: 90%;   
  3.   margin: 0 auto;   
  4. }   
  5. .container .left {   
  6.   float: left;   
  7.   height: 300px;   
  8.   background-color: lightpink;   
  9. }   
  10. .container .rightright {   
  11.   display: table-cell;   
  12.   *display: inline-block;   
  13.   height: 300px;   
  14.   background-color: lightyellow;   
  15. }  

總結以下：

1：當一個元素設置float屬性時，會使元素塊狀化。

2：float屬性的創造初衷就是為了文字環繞效果而生的。

3：float元素會使父元素高度塌陷。

4：float元素會除去換行帶來的空格。

5：使用float可以實現兩欄自適應的布局。

以上這篇CSS重要屬性之float學習心得(分享)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

關於CSS
淺談css中vertical-align和line-height的用法
（1）、將一個圖片放入一個div塊中，div塊背景顏色設置為aquamarine。將會發現圖片與di
CSS如何定義一條水平虛線?
如果定義一條水平的虛線呢？　　我們首先需要了解，關於線條的CSS的兩個樣式：　　dotted&nbs
CSS基礎教程:CSS網頁布局Page Layout
使用CSS布局非常簡單，如果你習慣使用tables布局，可能開始時有點困難，但其實很容易，事實上只是

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
canvas之萬花筒效果的簡單實現(推薦) 避免表格table被撐開變形的CSS CSS3 box-sizing屬性詳解 利用css實現波紋動畫效果實例 利用純CSS實現頭像旋轉和發光的效果 用CSS來控制網頁背景 CSS中內聯元素與塊級元素 CSS精粹之布局技巧 CSS語法手冊（六）分類屬性 在 CSS 中關於字體處理效果的思考
熱門推薦
用React加CSS3實現微信拆紅包動畫效果 css實現文字的自動隱藏 14個常見的CSS技巧及常見問題 三種簡潔的Tab導航(網頁選項卡) CSS邊界線消失的問題詳解 CSS3實現頭像旋轉效果 CSS垂直居中和水平居中方法總結 CSS3 :not()選擇器實現最後一行li去除某種css樣式 css+div 圖片排列布局
大家都在看
下載文件個別浏覽器文件名亂碼解決辦法 JQuery對表格進行操作的常用技巧總結 中文網站設計:中文網站中蹩腳的英文 簡要分析基於圖形界面的人機軟交互設計 設計理論:提升設計的專業性和感染力 應用ul、li實現表格形式 AJAX基礎教程示例源碼 css3半透明示例代碼
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved