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，就可以了。以后我們都采用這種方式。
效果：
