第五節 HTML&CSS -- 關於浮動和清除浮動的解說，以及兩個大坑不要踩

1.隨便嘮叨幾句

 

這一節課我會對浮動元素和怎樣清除浮動相關的技術進行一個講解，同時，我會列舉一些咱們前端開發中常見的坑，但願你們之後不要在這些地方犯錯。在開始今天的課程以前，有一個東西我須要先講一下，學網頁，我認爲最最重要的就是學佈局，若是一個網頁，你不去佈局，學再多的div加css也無濟於事，你就算學了再多的特效，又能怎麼樣？那麼，何爲佈局呢？很簡單，就是一句話，把元素放在你想要放的地方，這個就是佈局了。對於一些後臺管理系統，其實最最多見的仍是table佈局，包括如今很流行的前端框架 - easyui，你去看他的源碼，確定也是table佈局嘛。爲何會致使這樣的狀況發生呢，緣由很簡單，由於後臺管理系統主要是給工做人員去作系統維護的，好比一個新聞發佈網站，工做人員要發佈一條新聞，那麼就得登陸後臺管理系統，進入一個什麼新聞管理的菜單，這些操做注重的是簡單，易用，不須要有多麼華麗的效果。因此，table佈局仍是有必要意義的。那麼，咱們在學習的過程當中，是否是必定要把table佈局弄得很是精通呢？這倒也沒必要，咱們之後開發項目的時候，基本上仍是要運用一些前端框架的，咱們更多的，應該是去學會如何使用一個框架，而不是本身去造輪子。固然，等你之後成爲技術大牛，造一點輪子也無妨。可是如今，不必。

OK，廢話很少說，開始吧，我已經用table畫了一個簡單的佈局，你不必去深究這些代碼的含義，固然能看懂最好，看不懂也無傷大雅。反正之後咱們不太可能本身去佈局，都是用框架，嗯，就是這麼回事。不過呢，若是要定製一些東西，那麼仍是須要div加css技術出馬。

頁面：

今天講的東西，就在這個頁面中實踐。

 

2.沒法想象，行內元素居然這麼任性，給了寬度和高度也不認賬！

 

額，是這樣的哈，對於初學前端技術的萌新，每每都會在這一個地方吃虧，那就是給行內元素加了寬度和高度，怎麼就沒用呢？好比，我在A區域添加一個span元素。

而後，給它加一點樣式：

再複習一遍，這個span元素的id是否是叫haha啊，那麼我在給他設置樣式表的時候，是否是要在前面要加一個#號呀？誒，就是這樣的，若是這個span元素綁定了一個class屬性，叫作xixi，那麼前面加的就是一個點，應該是 「.xixi」 ，不要混淆了。讓咱們來看一下效果：

我靠，鬱悶的事情果真發生了，爲何加寬度和高度沒有效果呀？呵呵，我相信不少人在這裏吃過虧，無論怎麼調就是沒效果。原來，span是一個行內元素，而只有塊級元素和行內塊級元素纔可以有本身的寬高，因此，咱們給行內元素添加寬度和高度是沒有效果的。解決方法有不少，最簡單的，就是給這個span元素添加一個「display:block」或者「display:inline-block」的樣式，就能夠解決這個問題了。

效果：

接下來一個問題，咱們已經給這個行內元素升級爲行內塊級元素了，如何讓裏面的字相對於這個span居中定位呢？首先，咱們能夠給它加一個text-align:center

而後，給它設置一個行高，和這個元素自己的高度相等

這樣是否是就行了呀？嗯，這是今天第一個知識點。

 

3.震驚！P元素和div元素居然這樣，據說還有程序員不知道！

 

p元素是一個塊級元素，所謂塊級元素，就是那種會獨自佔滿一行的元素，還有div也是塊級元素。先來個例子吧。我如今要在B區域加一個P元素：

而後，我在這個p元素上掛載一個div元素：

看起來彷佛沒什麼，讓咱們打開F12看看：

發現問題了嗎，各位？原本是一個p元素，當我在它裏面放一個div元素的時候，一個p元素居然被分紅了兩個，同窗們，這樣是否是很危險啊？因此，咱們必定要警戒這種寫法，p元素被設計出來的本意，就是用來存放文本內容的，不可以用來佈局，否則的話，可能會產生不少意想不到的BUG。佈局，咱們通常就用table，或者div、span，加上css就能夠了。p元素就是用來存放文字的，明白了嗎？

 

4.驚！多個div元素爲了並排顯示，連這種事都幹得出！

 

接下來，咱們來講一個很是很是重要的知識點，那就是浮動佈局。那麼，到底什麼是浮動呢，仍是以案例爲主吧。我在B區域畫三個div盒子，給他們都綁定同一個class，叫作box。

能夠看到，div元素是塊級元素，再複習一下啊，塊級元素有什麼特色啊，是否是會獨自佔滿一行呀？因此，這三個div元素就無法在同一行顯示了。那麼，有沒有什麼辦法，讓多個塊級元素在同一行顯示呢？固然是有的，咱們能夠採用浮動佈局，也就是說，讓這些div元素「飄起來」，注意哦，飄起來之後，有兩個方向，一個是向左漂浮，另外一個則是向右漂浮。是的，只有這兩種狀態，沒有第三種了。明白了嗎，只有兩種，要麼往左邊浮動，要麼往右邊浮動。

咱們來嘗試一下，讓全部class爲box的元素都往左邊飄。

哇，是否是飄起來了。沒錯，這個就叫作浮動佈局。我如今問一下你們，你以爲，浮動佈局的目的是什麼？沒錯，就是爲了讓塊級元素在同一行上顯示，僅此而已。沒有其餘更玄妙的說法了，不論多麼複雜的網頁，若是用到了浮動佈局，確定就是這麼回事，確定是爲了讓某些div元素在一行上面顯示。在這個例子中，咱們若是讓第三個盒子往右浮動，就給它單獨加一個行內樣式：

如今，我還有個很是很是重要的知識點要交給你們，究竟是什麼呢？咱們直接來個案例好很差？

我把這幾個盒子換成span元素：

而後把浮動去掉：

頁面就是這樣的：

爲何呀，剛纔咱們是否是已經說了呀，當咱們給一個行內元素設置寬度和高度，是否是沒有用的呀？若是咱們要讓它生效，是否是要加一個「display:inline-block」或者「display:block」，就行了呀。那麼，在這個例子中，我直接加上一個浮動定位：

刷新頁面：

哇，天哪，怎麼會這樣？哦，原來，一旦咱們給元素加了浮動定位，哪怕它是行內元素，也會默認轉換成行內塊級元素了。這也是一個比較重要的知識點，你們必定要記住。

 

5.驚！div元素因真愛成功私奔，還讓空元素背鍋，沒WIFI也要看！

 

最後呢，咱們要講的，就是關於清除浮動的問題了，先來看下問題的由來。剛纔，咱們弄了三個div元素，都設置了float:left，因而，他們就脫離了本來的軌道，術語叫作脫離標準流。其實就是把本身的位置給騰出來了，來個例子吧。

首先，爲了方便起見，咱們把float：left，float:right這兩個樣式也封裝一下，做爲一個通用的工具樣式，先把上一節課的tool.css拷貝過來：

而後，加上浮動的樣式：

而後，在這個html文件中，引入tool.css:

這樣的好處就是，咱們沒必要單獨寫浮動的樣式表了，在box中，把浮動樣式刪掉：

而後，在須要加浮動的地方，加上浮動的class：

誒，這樣是否是也能夠呢？好的，接下來，我在第三個盒子後面再加一個盒子：

注意哦，第四個盒子我沒有加上左浮動，會有怎樣的效果呢？看：

第四個盒子消失了，爲何呢？剛纔咱們說，當一個元素設置了浮動，那麼就會飄起來，脫離標準流，也就是不佔位置了。那麼，在它後面的元素是否是就要緊跟上來啊？舉一個現實生活中的例子，ABC三我的在排隊買彩票，忽然，B想到還有一件事情要作，就走了，那麼C是否是要往前走一步，佔據B的位置呀？注意哦，這個隊伍就相似於標準流，如今B脫離了標準流，C是否是要跟上來，明白了嗎？那麼，在咱們開發網頁的時候，咱們確定不但願這樣的事情發生吧，還記得咱們當初採用浮動佈局的目的是什麼嗎，是否是要讓幾個塊級元素並排顯示呀？如今雖然並排顯示了，但是後面的元素自動頂上來，是否是佈局就亂了呀？因此，咱們須要清楚浮動。到底什麼叫作清楚浮動呢，其實很簡單，一句話的事：

清除浮動就是給飛出去的元素填坑，好讓後面的元素不頂過來。這就是清除浮動，沒有什麼更加玄妙的東西了，就這麼簡單。

如何清除浮動呢？有一個辦法就是在浮動定位的最後一個元素後面，加上一個空元素，好比div元素，裏面啥也不寫，而後加上一個叫作clear:both的樣式，那麼，浮動就被清除了。

刷新瀏覽器：

誒，是否是就行了呀？但是，你是否以爲，每次都這樣去清除浮動的話，是否是會有不少個這樣的空元素呀？這些空元素，僅僅是爲了清除浮動而已，那麼網頁代碼就顯得有些亂。其實還有一種更好的方式，就是運用僞類，這是一個比較成熟的方式，也算是css中一種比較先進的技術，你就算看不懂也無所謂，只要會用就行。

我把這個樣式也添加到了tool.css裏面，而後，給須要清除浮動的那個元素添加上clearfix的class就OK了。好比，在這個例子中，咱們就須要給三個盒子外面套一層div，加上clearfix的class，就能夠了。之後咱們都採用這種方式。

效果：

 

全文完。

源碼下載地址：http://www.xiaotublog.com/getResourcePage.html?id=22 歡迎關注個人博客，長期更新各類JavaWeb相關的資料。