新建一個html網頁，在body中插入【<div></div>】並引入CSS【.content{width: 420px;height: 100px;background: #d4d4d4;padding: 5px 0 5px 5px;}】。
在大DIV中插入一個DIV【<div></div>】並引入CSS【.a{width: 100px;height: 100px;margin-right: 5px;background: #ff0000;}】定義它的高，寬，外邊距，背景色。
繼續新增一個同級的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;}】。重新整理後可以看到預覽效果是4個IDV垂直排列的，怎麼能讓他們水平排列在一行呢？
為了方便朋友們檢視順序，把4個DIV分別插入一個數字，相當於給他們編一個號碼。
接下來就要用到浮動程式碼了。在4個DIV共用的a樣式中，加入左浮動【float: left;】。儲存並重新整理網頁可以看到已經都在一行上了，而且是按照編碼順序從左到右排列的。
我們再來試一下右浮動【float:right】，可以看到DIV是從右向左排列的。現在朋友們知道怎麼使用浮動程式碼了嗎？
新建一個html網頁，在body中插入【<div></div>】並引入CSS【.content{width: 420px;height: 100px;background: #d4d4d4;padding: 5px 0 5px 5px;}】。
在大DIV中插入一個DIV【<div></div>】並引入CSS【.a{width: 100px;height: 100px;margin-right: 5px;background: #ff0000;}】定義它的高，寬，外邊距，背景色。
繼續新增一個同級的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;}】。重新整理後可以看到預覽效果是4個IDV垂直排列的，怎麼能讓他們水平排列在一行呢？
為了方便朋友們檢視順序，把4個DIV分別插入一個數字，相當於給他們編一個號碼。
接下來就要用到浮動程式碼了。在4個DIV共用的a樣式中，加入左浮動【float: left;】。儲存並重新整理網頁可以看到已經都在一行上了，而且是按照編碼順序從左到右排列的。
我們再來試一下右浮動【float:right】，可以看到DIV是從右向左排列的。現在朋友們知道怎麼使用浮動程式碼了嗎？