css 的 float 屬性，讓網頁元素可以自由浮動
自從 css 設計普及至全世界的網頁設計市場，許多優秀的網頁設計師也展開了新一代的設計概念，css float 這個讓網頁元素浮動的功能也讓許多的網頁變得更豐富，在早期的 html 網頁設計時代，沒辦法讓一個表格或一個圖片浮動，就必須搭配 javascript 的方式來設計，當然是有一點麻煩，到了 css 當道的時代，只需要透過 css float 就可以做到網頁元素浮動效果，可說是網頁技術的大進化。
從 css float 的設計概念上，我們可以看到許多的東西都可以用浮動的方式來呈現，特別是 div 區塊的排版，對了，這裡的浮動不是層層推疊的那種 3D 效果，而是平面區塊元素間的位置，舉個例子來說，現在我們設了兩個 DIV 區塊，想要讓它們並排在一起，比較簡單的方式就是用 float 讓其中一個浮動上來，就可以水平排列囉！
css float 讓 div 區塊水平排列的範例
這兩個 DIV 區塊都使用了 float:left 的語法，讓他們向左浮動，就會自動水平排列在一起，若是沒有使用 float 會怎樣呢？答案是會垂直排列，也就第一個在上面，第二個在下面，這也是 DIV 本身預設的效果，想要水平排列就是使用 float 讓他們浮動吧！
這兩則教學文章好好認真的研究，基本上就能搞清楚怎麼使用浮動技巧。
從 css float 的設計概念上，我們可以看到許多的東西都可以用浮動的方式來呈現，特別是 div 區塊的排版，對了，這裡的浮動不是層層推疊的那種 3D 效果，而是平面區塊元素間的位置，舉個例子來說，現在我們設了兩個 DIV 區塊，想要讓它們並排在一起，比較簡單的方式就是用 float 讓其中一個浮動上來，就可以水平排列囉！
css float 讓 div 區塊水平排列的範例
<div style="border: 2px black solid;float: left; height: 70px; width: 200px;"></div>
<div style="border: 2px black solid;float: left; height: 70px; width: 200px;margin-left:5px;"></div>
<div style="border: 2px black solid;float: left; height: 70px; width: 200px;margin-left:5px;"></div>
這兩則教學文章好好認真的研究，基本上就能搞清楚怎麼使用浮動技巧。