這裡要講解的區別是float布局和position中的absolute布局的區別。
因為它們兩個都是把標籤文件流中拉了出來。但是具體實現時，它們兩個的效果又有點區別。
效果圖:
很明顯可以看到橘黃色div裡面的文字就被影響到了。
**：
lang="en">
charset="utf-8">
float的區別title>
.div1
.div2
.div3
style>
head>
class="div1">這張圖就清晰地說明了浮動元素其實是不在文件流之中的。首先，瀏覽器頁面沒有500畫素寬，所以側邊欄2沒法在頂部渲染（側邊欄1的存在使空間不夠了），這時文件流僅僅進行到標題欄。因此中欄從標題欄下方開始渲染，為了繞開兩個側邊欄，只好先在左上角寫幾個字，然後到側邊欄2右側憋屈地渲染，最後才正常地舒展開（你可以這樣想象，綠色和藍色的後面，其實是沒有文字的紅色）。div>
class="div2">這張圖就清晰地說明了浮動元素其實是不在文件流之中的。首先，瀏覽器頁面沒有500畫素寬，所以側邊欄2沒法在頂部渲染（側邊欄1的存在使空間不夠了），這時文件流僅僅進行到標題欄。因此中欄從標題欄下方開始渲染，為了繞開兩個側邊欄，只好先在左上角寫幾個字，然後到側邊欄2右側憋屈地渲染，最後才正常地舒展開（你可以這樣想象，綠色和藍色的後面，其實是沒有文字的紅色）。div>
class="div3">這張圖就清晰地說明了浮動元素其實是不在文件流之中的。首先，瀏覽器頁面沒有500畫素寬，所以側邊欄2沒法在頂部渲染（側邊欄1的存在使空間不夠了），這時文件流僅僅進行到標題欄。因此中欄從標題欄下方開始渲染，為了繞開兩個側邊欄，只好先在左上角寫幾個字，然後到側邊欄2右側憋屈地渲染，最後才正常地舒展開（你可以這樣想象，綠色和藍色的後面，其實是沒有文字的紅色）。div>
body>
html>2.position布局
效果圖:
很明顯，綠色div中的字型被掩蓋了。
lang="en">
charset="utf-8">
position的區別title>
.div1
.div2
.div3
style>
head>
class="div1">這張圖就清晰地說明了浮動元素其實是不在文件流之中的。首先，瀏覽器頁面沒有500畫素寬，所以側邊欄2沒法在頂部渲染（側邊欄1的存在使空間不夠了），這時文件流僅僅進行到標題欄。因此中欄從標題欄下方開始渲染，為了繞開兩個側邊欄，只好先在左上角寫幾個字，然後到側邊欄2右側憋屈地渲染，最後才正常地舒展開（你可以這樣想象，綠色和藍色的後面，其實是沒有文字的紅色）。div>
class="div2">這張圖就清晰地說明了浮動元素其實是不在文件流之中的。首先，瀏覽器頁面沒有500畫素寬，所以側邊欄2沒法在頂部渲染（側邊欄1的存在使空間不夠了），這時文件流僅僅進行到標題欄。因此中欄從標題欄下方開始渲染，為了繞開兩個側邊欄，只好先在左上角寫幾個字，然後到側邊欄2右側憋屈地渲染，最後才正常地舒展開（你可以這樣想象，綠色和藍色的後面，其實是沒有文字的紅色）。div>
class="div3">這張圖就清晰地說明了浮動元素其實是不在文件流之中的。首先，瀏覽器頁面沒有500畫素寬，所以側邊欄2沒法在頂部渲染（側邊欄1的存在使空間不夠了），這時文件流僅僅進行到標題欄。因此中欄從標題欄下方開始渲染，為了繞開兩個側邊欄，只好先在左上角寫幾個字，然後到側邊欄2右側憋屈地渲染，最後才正常地舒展開（你可以這樣想象，綠色和藍色的後面，其實是沒有文字的紅色）。div>
body>
html>
inline block和float 布局的選擇
浮動通常表現正常，但有時候搞起來會很糾結。特別是處理內部容器中的浮動，比如對一排使用浮動後對齊出現問題。inline block是我們的另一種選擇。使用這種屬性可以模擬部分浮動的特徵，而不需要處理一些浮動帶來的問題。inline block 用在展示一系列 的需求，用inline block代替了浮...
Float浮動布局
什麼是浮動布局？浮動可以設定元素，脫離正常的文件流，向右或者向左，靠近父元素的邊緣或者是設定了浮動的其他的元素的邊緣靠攏。比如，我們使用div等塊標籤的時候，它們都是獨佔一行，但是很多時候要將多個div併排放置，這種情況就可以使用浮動布局。浮動可以那些問題？使用浮動布局之後 這裡也是可以使用浮動解決...
float和double的記憶體布局
已經有人寫好了，我就不寫了。乙個人，只認識二進位制，他要表達十進位制中的9，需要寫成1001，換算公式為1 2 3 0 2 2 0 2 1 1 2 0 9。他要表達十進位制中的9.5，需要寫成1001.1，換算公式為1 2 3 0 2 2 0 2 1 1 2 0 1 2 1 9.5。如果有乙個二進位...