div css float浮動用法(left right)

        在學習牛腩老師的視頻中，很深刻的體會了浮動帶來的效果的震撼，現在是對B/S這塊的知識是越來越喜歡，越來越願意學習，特別是現在看網頁的時候看到那些代碼感覺很是熟悉，特別親切，只是下面自己又通過網站的學習和大家通過分享。

 

div+css中float認識及css float用法，DIV CSS float浮動知識用法與float浮動學習

Css樣式的float浮動屬性，用於設定標籤對象（如：<div>標籤盒子、<span>標籤、<a>標籤、<em>標籤等html標籤）的浮動布局，浮動也就是我們所說標籤對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。

float是什麼意思？
float是浮動，翻譯成中文也是浮動意思。進入對應css手冊中float手冊瞭解float基本資料。

float的作用
通過css定義float（浮動）讓div樣式層塊，向左或向右（靠）浮動。

float浮動教程目錄

1. float文法
2. float應用與用法
3. float浮動案例
4. css浮動其他應用
5. css浮動總結

一、float文法   -   TOP

Float常跟屬性值left、right、none
Float:none 不使用浮動
Float:left 靠左浮動
Float:right 靠右浮動

float文法：
float : none | left |right

參數值：
none : 　對象不浮動
left : 　對象浮在左邊
right : 　對象浮在右邊

 

Float浮動結構分析圖

接下來我們來通過一個div+css執行個體講解float提示。

二、float應用與用法   -   TOP

Float浮動用於設定對象靠左與靠右浮動樣式，可以實現我們所需要的讓DIV、SPAN等標籤居左居右浮動。

簡單使用文法

 

  
div{float:left} /* css注釋：設定div對象浮動靠左（left） */ 
  
div{float:right} /* css注釋：設定div對象浮動靠右(right) */ 
 

三、css float浮動案例   -   TOP

我們設定一個盒子裡，一個靠右、一個靠左浮動2個盒子，為了直觀看到css浮動布局效果，我們對兩個盒子設定一定寬度、高度和邊框。

1、主要的html程式碼片段：

 

  
<div class="divcss5"> 
  
    <div class="divcss5_left">布局靠左浮動</div> 
  
    <div class="divcss5_right">布局靠右浮動</div> 
  
    <div class="clear"></div><!-- html注釋：清除float產生浮動 --> 
  
</div> 
 

2、css程式碼片段：

 

  
.divcss5{ width:400px;padding:10px;border:1px solid #F00} 
  
.divcss5_left{ float:left;width:150px;border:1px solid #00F;height:50px} 
  
.divcss5_right{ float:right;width:150px;border:1px solid #00F;height:50px} 
  
.clear{ clear:both} 
 

3、效果

css div浮動float用法應用案例

四、css+div浮動其它應用案例（休息閱讀）   -   TOP

DIV CSS實驗一
Css樣式執行個體內容，我們讓文字和圖片在一個固定寬度div層內，讓藍色背景文字內容居右，小圖片居左。
www.divcss5.com CSS案例示範最終如下

1、首先我們設定一個最外層的寬度為300px，高度為200px的css命名為box的css選取器代碼如下（知識點px是什麼意思）
.box{width:300px; height:200px;}

2、設定box內的文字內容部分css樣式命名為yangshi，並設定背景為藍色，寬度為120px，居右浮動
.yangshi{ width:120px; float:right; background:#0066FF;}

3、設定圖片居左浮動div+css樣式
img { float: left;}

4、body內的div布局，代碼如下

<div class="box"> <div class="yangshi">我是www.divcss5.com 網站，測試內容</div> <img src="demo.gif" /> </div>

說明：這裡img標籤是連結外部圖片，圖片名為demo.gif

最終示範結果

 

CSS實驗二
接下來我們示範使用div+css讓這裡小圖片居右（上個例子是居左），藍色背景文字內容區居左（上個例子是居右）(擴充css 置中)。這裡我們只需要改變yangshi的float:right;為float:left和圖片css樣式img { float: left;}為img { float: right;}
CSS代碼如下：

.box{width:300px; height:200px;} .yangshi{ width:120px; float:right; background:#0066FF;} img{ float:left;}

html中的css代碼和內容不變
最終示範結果如下：
 

通過以上兩個css執行個體對學習float大有協助。

五、css浮動總結   -   TOP

我們要區別與文字內容靠左( text-align:left)靠右( text-align:right)樣式，浮動只針對html標籤設定靠左靠右浮動樣式。float浮動樣式沒有靠中（浮動置中）的樣式，如果需要讓標籤對象置中需要（css margin）知識。這裡記住浮動靠右使用float:right，浮動靠左使用float:left樣式即可，使我們的網頁設計的更加漂亮與美觀。