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

float是什么意思？

float是浮動，翻譯成中文也是浮動意思。進入對應css手冊中float手冊了解float基本信息。

float的作用

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

float浮動教程目錄

float語法

float應用與用法

float浮動案例

css浮動其他應用

css浮動總結(jié)

float語法

Float常跟屬性值left、right、none

Float:none 不使用浮動

Float:left 靠左浮動

Float:right 靠右浮動

float語法：

float : none left right

參數(shù)值：

none : 　對象不浮動

left : 　對象浮在左邊

right : 　對象浮在右邊

接下來我們來通過一個div+css實例講解float使用技巧。

float應用與用法

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

簡單使用語法

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

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

css float浮動案例

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

1、主要的html代碼片段：

<div class="div ">

<div class="div _left">布局靠左浮動</div>

<div class="div _right">布局靠右浮動</div>

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

</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用法就這么多，需要的朋友可以保存一下，也請大家持續(xù)關(guān)注本站的其他更新。

相關(guān)閱讀：

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

CSS的margin有什么作用

CSS3怎么做出圓角

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