新建一個html網(wǎng)頁，在body中插入【<div></div>】并引入CSS【.content{width:420px;height:100px;background:#d4d4d4;padding:5px05px5px;}】。

在大DIV中插入一個DIV【<div></div>】并引入CSS【.a{width:100px;height:100px;margin-right:5px;background:#ff0000;}】定義它的高，寬，外邊距，背景色。

繼續(xù)添加一個同級的DIV【<div></div>】并引入樣式a和樣式b，樣式B只定義背景色【.b{background:#FF5F00;}】。可以看到第2個DIV排到了第一個的下方位置。

按照同樣的方法再添加2個同級的DIV并引入不同顏色的DIV【<div></div><div></div>】。然后引入CSS【.c{background:#FFED00;}.d{background:#00FF93;}】。刷新后可以看到預(yù)覽效果是4個IDV垂直排列的，怎么能讓他們水平排列在一行呢？

為了方便朋友們查看順序，把4個DIV分別插入一個數(shù)字，相當(dāng)于給他們編一個號碼。

接下來就要用到浮動代碼了。在4個DIV共用的a樣式中，加入左浮動【float:left;】。保存并刷新網(wǎng)頁可以看到已經(jīng)都在一行上了，而且是按照編碼順序從左到右排列的。

我們再來試一下右浮動【float:right】，可以看到DIV是從右向左排列的。現(xiàn)在朋友們知道怎么使用浮動代碼了嗎？