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浮動(dòng)教程目錄

float語法

float應(yīng)用與用法

float浮動(dòng)案例

css浮動(dòng)其他應(yīng)用

css浮動(dòng)總結(jié)

float語法

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ì)象浮在右邊

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

float應(yīng)用與用法

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

簡(jiǎn)單使用語法

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

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

css float浮動(dòng)案例

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

1、主要的html代碼片段：

<div class="div ">

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

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

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

</div>

2、css代碼片段：

.div { width:400px;padding:10px;border:1px solid #F00}

.div _left{ float:left;width:150px;border:1px solid #00F;height:50px}

.div _right{ float:right;width:150px;border:1px solid #00F;height:50px}

.clear{ clear:both}

CSS操作DIV的float用法就這么多，需要的朋友可以保存一下，也請(qǐng)大家持續(xù)關(guān)注本站的其他更新。

相關(guān)閱讀：

CSS的min-width和max-width怎么設(shè)置

CSS的margin有什么作用

CSS3怎么做出圓角

以上就是CSS操作DIV的float用法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！