display:block 內聯元素定義高和寬(轉爲塊元素)
float:left 塊元素位於同一行
Firefox區域浮動，在第2個塊元素加float:left
IE6的一個BUG（距離瀏覽器的左邊距並不是CSS 代碼中定義的20像素，而是40像素），display:inline
怎樣才能讓紅色區域水平定位於瀏覽器的正中間，無論瀏覽器窗口的大小，顯示器分辨率的大小。margin:0 auto;
效果：
=============================
如果要讓定義好的寬度和高度對內聯元素起作用，有什麼辦法沒有？答案是：當然。因爲事情沒有絕對的在CSS 上面也成立，因爲CSS 中有兩種元素，內聯元素和塊狀元素，但
是寬度和高度只對塊狀元素起作用，內聯元素不起作用，如果我們把內聯元素轉化成塊狀元素，他不就具有了塊狀元素的特性了嘛，當然寬度和高度也就起作用了，如果你能想到這個思路，證明你的大腦現在非常活躍喲，這時候我們只需要給相應的內聯元素加上一個屬性display:block 就可以了。
爲什麼兩個a 不處於同一行了呢，那是因爲這兩個內聯元素a 都被轉化成了塊狀元素，既然成功轉化爲塊狀元素，就應該具有塊狀元素最顯著的一個特點，不允許其他元素與他同
一行，所以這兩個a 垂直排列嘍~那有沒有把法讓他們處於同一行？當然有啦
【例子】，要求：
1）兩個方塊，一個紅色#900，一個藍色#009；
2）紅色方塊寬度和高度均爲200像素，藍色方塊寬度爲300像素，高度爲200像素；
3）紅色方塊藍的上外邊距(margin-top)和左外邊距(margin-left)均爲20像素；
大家應該注意到了，雖然紅色方塊的寬度並不是100%，但是藍色並未和紅色處於同一行，這就是塊狀元素比較“霸道”的一點，（即使塊狀元素的寬度不是100%，它也不允許其
他元素和他同在一行）爲了消除這種“霸權”，讓紅色和藍色方塊都處在一行，此時就需要拿出我們的利器Float！只需要在紅色方塊的CSS 裏面加上“float:left;”，這時
候在IE6中可以看到藍色方塊的確跑到紅色方塊的後面了，並且處於一行了，但是在FireFox中卻變成了如下效果：
這時候就需要注意了，FF 中如果前面的區域浮動了，後面的那個區域很有可能就會和前面的區域發生重疊並錯位。怎麼才能解決這個問題，解決這個瀏覽器兼容的問題，很容易，只需要在藍色方塊的CSS 代碼中也加入“Float:left;”，問題就解決了，加上試試，看看在FF 中藍色方塊是不是和紅色方塊處於一行了~到這裏，大家應該明白Float 的作用了吧，就是爲了消除塊狀元素“霸權主義”的一把利器！在佈局頁面的時候有時候是需要消除塊狀元素霸權主義才能佈局好喲，
細心的同學會注意到，在IE6中紅色方塊距離瀏覽器的左邊距並不是CSS 代碼中定義的20像素，而是40像素，如下圖：
其實這是IE6的一個BUG，(IE6雙倍邊距BUG)，只要滿足下面3個條件纔會出現這個BUG：
1）要爲塊狀元素；
2）要左側浮動；
3）要有左外邊距(margin-left)；
解決這個BUG 很容易， 只需要在相應的塊狀元素的CSS 樹形中加入
“display:inline;”，代碼如下：
===============================================
讓紅色區域與瀏覽器的頂部和左邊距離爲20像素
margin-top:20px;
margin-left:20px;
不過上面的這種寫法我們可以精簡爲
margin:20px 0 0 20px;
其中的數值順序是：上右下左。而margin:20px 0;則和margin:20px 0 20px 0;是等價的。
我們接着將問題延伸，怎樣才能讓紅色區域水平定位於瀏覽器的正中間，無論瀏覽器窗
口的大小，顯示器分辨率的大小。
