Sunny蕭蕭：本文作為小白入門級，相對基礎，是寫給現在想了解一點前端知識的設計師同行們。文章把前端相關的術語都用設計師熟悉的東西解釋一遍，通俗易懂幽默風趣，基于上一篇，要讓div乖乖“聽話”，今天來應用和深挖float這個屬性。

上篇回顧：《零基礎也能看懂！寫給設計師的前端小知識之小白入門篇（一）》

div是帶著霸道基因出生的（不明白的請先看完上一篇哦），其實它主要是還沒有碰上能征服它的你吧！哈哈……今天帶大家來把他拿下。

好吧，我承認“附加樣式”這個詞不知道是從哪兒看的還是我自己這么叫的，我們之后就分為樣式和默認樣式吧。

一、矩形排排坐

乃們還記得下面這張圖嗎？

他們真的是很霸道呢，不過在html界，霸道的多了去了，今天我們先來把它收拾一下吧。

在body內畫兩個矩形：

<div style="width: 100px; height: 100px;background-color: yellow;"></div>

<div style="width: 100px; height: 100px;background-color: blue;”></div>

（PS：html里的顏色也是直接可以寫單詞的，不想寫顏色值的童鞋也可以直接寫pink、black、red……等平時知道的一些顏色英文單詞。上一節中忘了告訴大家，顏色值3位和6位都是可以的，例如：#333333，#4ed……都行，要問為什么的話還要扯上進制，我就不再贅述，你們記得就行了。）

然后保存，瀏覽器打開，即可看到：

那為了讓藍色矩形排在黃色矩形右邊讓他們排成一橫排的話，首先讓黃色矩形讓個位置，“靠邊站”，

在第一個矩形中加入一條新樣式：float：left；（即向左靠，遵循我們的寫字習慣從左往右排吧，你也可以試試向右靠）

然后……

啊嘞？怎么只剩一個了！！！

待我給你慢慢道來……

嗯，你問我講這個干嘛？再教你一個屬性：opacity（透明度），其后跟的是小數，0.5即表示50%透明度。

<div style="width: 100px; height: 100px;background-color: yellow;float:left;?opacity:0.5;”></div>

<div style="width: 100px; height: 100px;background-color: blue;”></div>

然后保存刷新：

如果你去驗證了，你會發現這個顏色就是我們在PS里降低黃色透明度與藍色相交得到的顏色。也就是說：

是的，沒錯，藍色矩形被黃色矩形遮住啦。（下面我們簡稱兩個矩形為小藍和小黃）

至于為什么會被遮住，這是跟float這個屬性相關的。float直譯過來即是浮動的意思，也就是添加了float屬性的小黃實際上是浮起來了，所以原先它“站”的位置就空了，小藍“篡位”而上占據了小黃原來的位置。就像圖層一樣，上面的圖層會遮住與它自身一樣大小的面積，所以后來的小藍永遠不能與小黃“平起平坐”（嗚嗚嗚……你是我無法企及噠）。但是你光在藍色矩形上加浮動屬性又沒有用，div天生的霸道基因不允許……不信你試試，哈哈……

那么問題來了，想排排坐，又不想被小黃踩在腳下，怎么辦呢？

只有把小藍也提起來咯。

所以兩個矩形都應該加float屬性，這樣他們才處于同一層，

<div style="width: 100px; height: 100px;background-color: yellow;float:left;?”></div>

<div style="width: 100px; height: 100px;background-color: blue;float:left;?”></div>

好啦，可以自己嘗試多畫點大小不一的矩形，讓他們排一下，不過不是所有的都能好好排的。在html中，body的大小雖然是無限的，可是你的屏幕也只能顯示那么點東西做再寬有什么意義呢。除了現在很流行的滿屏網頁，一般網頁都會規定寬度而不會規定高度。你可能經常見到有豎滾動條的網頁，但是橫向滾動條的幾乎沒有（除非你的設備屏幕小于一般PC屏幕或者把網頁放大了幾倍等其他原因），所以也可以說網頁大小是和你瀏覽器顯示區域有關。

所以許多網站會取一個多種屏幕都適用的內容寬度，也就是做webUI時你留的有效內容區域（常見的有1200px、1001px等）。開發人員會根據你的尺寸來確定一個最大寬度來排版。

多畫幾個高度一樣寬度不一的矩形，為它們都加上向左浮動的屬性（float：left；）縮小你的瀏覽器寬度，你會發現，它們不會一直呆在第一排，有時候竟會換行。當最右邊的距離不足以放下它，他就會選擇換一行。這也是現在響應式網站的奧妙之一，同一個網頁，PC和手機都可以瀏覽，且布局會有所改變但不影響內容。如下圖：

你猜紅色的是不是在發現沒有位置了換到第三行而變成了手機上看到的頁面那樣？(*^__^*)

所以float這個屬性是html中非常重要的一個屬性，花的篇幅比較長。所以今天其實就講了float一 個東西，透明度（opacity）和顏色那些順帶提一下。仿網頁排版布局今天就不講了，下次更新講排版！

「設計師自學指南系列教程」

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com