divcss教你怎么用float浮動(dòng)

Css樣式的float浮動(dòng)屬性，用于設(shè)置標(biāo)簽對(duì)象（如：<div>標(biāo)簽盒子、<span>標(biāo)簽、<a>標(biāo)簽、<em>標(biāo)簽等html標(biāo)簽）的浮動(dòng)布局，浮動(dòng)也就是我們所說標(biāo)簽對(duì)象浮動(dòng)居左靠左（float:left）和浮動(dòng)居右靠右(float:right)。

float是什么意思？
float是浮動(dòng)，翻譯成中文也是浮動(dòng)意思。進(jìn)入對(duì)應(yīng)css手冊(cè)中float手冊(cè)了解float基本信息。

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

一、float語法   -   TOP

Float常跟屬性值left、right、none
Float:none 不使用浮動(dòng)
Float:left 靠左浮動(dòng)
Float:right 靠右浮動(dòng)

float語法： 
float : none | left |right

參數(shù)值： 
none : 　對(duì)象不浮動(dòng)
left : 　對(duì)象浮在左邊
right : 　對(duì)象浮在右邊

Float浮動(dòng)結(jié)構(gòu)分析圖

接下來我們來通過一個(gè)div+css實(shí)例講解float使用技巧。

二、float應(yīng)用與用法   -   TOP

Float浮動(dòng)用于設(shè)置對(duì)象靠左與靠右浮動(dòng)樣式，可以實(shí)現(xiàn)我們所需要的讓DIV、SPAN等標(biāo)簽居左居右浮動(dòng)。

簡單使用語法

div{float:left} /* css注釋：設(shè)置div對(duì)象浮動(dòng)靠左（left） */ 

div{float:right} /* css注釋：設(shè)置div對(duì)象浮動(dòng)靠右(right) */ 

三、css float浮動(dòng)案例   -   TOP

我們?cè)O(shè)置一個(gè)盒子里，一個(gè)靠右、一個(gè)靠左浮動(dòng)2個(gè)盒子，為了直觀看到css浮動(dòng)布局效果，我們對(duì)兩個(gè)盒子設(shè)置一定寬度、高度和邊框。

1、主要的html代碼片段：

<div class="divcss5"> 

    <div class="divcss5_left">布局靠左浮動(dòng)</div> 

    <div class="divcss5_right">布局靠右浮動(dòng)</div> 

    <div class="clear"></div><!-- html注釋：清除float產(chǎn)生浮動(dòng) --> 

</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浮動(dòng)float用法應(yīng)用案例截圖

四、css+div浮動(dòng)其它應(yīng)用案例（休息閱讀）   -   TOP

DIV CSS實(shí)驗(yàn)一
Css樣式實(shí)例內(nèi)容，我們讓文字和圖片在一個(gè)固定寬度div層內(nèi)，讓藍(lán)色背景文字內(nèi)容居右，小圖片居左。
www.divcss5.com CSS案例演示最終效果圖如下

1、首先我們?cè)O(shè)置一個(gè)最外層的寬度為300px，高度為200px的css命名為box的css選擇器代碼如下（知識(shí)點(diǎn)px是什么意思）
.box{width:300px; height:200px;}

2、設(shè)置box內(nèi)的文字內(nèi)容部分css樣式命名為yangshi，并設(shè)置背景為藍(lán)色，寬度為120px，居右浮動(dòng)
.yangshi{ width:120px; float:right; background:#0066FF;}

3、設(shè)置圖片居左浮動(dòng)div+css樣式
img { float: left;}

4、body內(nèi)的div布局，代碼如下

 <div class="box">
<div class="yangshi">我是www.divcss5.com 網(wǎng)站，測試內(nèi)容</div>
<img src="demo.gif" />
</div>    

說明：這里img標(biāo)簽是鏈接外部圖片，圖片名為demo.gif

最終演示結(jié)果截圖

CSS實(shí)驗(yàn)二
接下來我們演示使用div+css讓這里小圖片居右（上個(gè)例子是居左），藍(lán)色背景文字內(nèi)容區(qū)居左（上個(gè)例子是居右）(擴(kuò)展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代碼和內(nèi)容不變
最終演示結(jié)果截圖如下：
 

五、css浮動(dòng)總結(jié)   -   TOP

我們要區(qū)別與文字內(nèi)容靠左( text-align:left)靠右( text-align:right)樣式，浮動(dòng)只針對(duì)html標(biāo)簽設(shè)置靠左靠右浮動(dòng)樣式。float浮動(dòng)樣式?jīng)]有靠中（浮動(dòng)居中）的樣式，如果需要讓標(biāo)簽對(duì)象居中我們?cè)赾ss布局居中相關(guān)文字給大家詳細(xì)講解介紹（css margin）。這里記住浮動(dòng)靠右使用float:right，浮動(dòng)靠左使用float:left樣式即可。