通過上一次的 CSS 教學我們學習了 CSS 盒子模型，已經能夠對一個區域進行佈局了但是網頁很大，網頁也是藉由這些小區域組成的，但你會發現你在初次學習盒子模型的時候，你想要做到盒子模型與盒子模型之間能從左至右去排列盒子模型的順序你之前是做不到的，你可能會有這方面困擾，這個困擾在前面學習時沒說是因為這涉及到另一個知識點，也就是 CSS 浮動。
以前剛學習完盒子模型不管怎麼使用就是只能從上到下去規劃盒子模型，當你學完本篇 CSS 教學文章的 CSS 浮動後你就會知道其實從上寫到下是有一個專有名詞的唷! 當然學習完 CSS 浮動你就能讓盒子模型從左至右並排排列了，學完本篇你就會知道為什麼 CSS 浮動很重要了。
- 為什麼需要浮動?
- 浮動的排列特性有什麼?
- 最常見的 3 種佈局方式
- 為什麼需要清除浮動?
網頁佈局方式有哪些?
在開始學習前我們先來討論討論什麼是網頁佈局方式? 網頁佈局方式有哪些，那些是你之前學過的，你還記得網頁的佈局本質是什麼嗎? 就是使用 CSS 來擺放盒子的相對應的位置，如果你問我為什麼的話我建議你可以看看我之前寫的文章好好複習一下為什麼 CSS 可以控制盒子唷! 否則接下來的 CSS 浮動你也會學不好的因為缺乏一些盒子模型觀念，一般傳統網頁的佈局方式有標準流、浮動、定位方式。
- 標準流 ( 普通流 / 文檔流 )
- 浮動
- 定位
你可能很好奇問我說傳統網頁是什麼意思，傳統就是指 PC 端，因為以前手機根本還不能上網，當然在移動端的網頁佈局方式不太相同又會有其他種佈局方式產生，這邊就先只討論 PC 端如果你很糾結到底要先學 PC 端還是移動端 ( 手機端、平板 )，我建議你先學會 PC 端在學移動端，因為觀念是可以互通的，那到底 PC 端的盒子模型排列有很重要嗎?
重要可大了，在前面盒子模型中還有更早之前的 CSS 教學中我們都一直在使用標準流的佈局方式，只是你不知道原來這種方式是標準流的寫法而已，如果你說是普通流寫法也是可以拉! 為什麼還需要學浮動、定位，當然你也可以只學一種不太會怎樣，只是讀者一看見你網站網頁直接就傻眼因為你網頁就算用盒子模型規劃了，你絕對沒辦法做到盒子從左到右並排，你會說怎麼可能明明就可以從左至右的排列，我只能說你之前初學盒子模型時沒有真的練習看看。
什麼是標準流?
就是 HTML 標籤按照規定默認的方式去排列去呈現給你看，有想起來嗎? 我們不是學過塊元素、行內元素、行內塊元素還學過如何使用 CSS 去改變他們之間能互相轉換的部分。
- 塊元素會獨佔一行
- 行內元素一行可以放好多個
- 行內塊元素一行可以放好多個
以上先前我們都很常去使用，現在我們終於知道其實它是有名字稱為標準流，標準流是最基本的佈局方式，但往往你只學一種標準流是不夠用的，一般前端工程師都還會使用其它兩種 CSS 浮動和 CSS 定位，你可能又會想說我又沒要當前端工程師，但是如果你要做出盒子並列或是固定在某一處，你依靠先前學習的標準流的方式完全會做不了的。
一般完整的網頁在開發的過程中，一個頁面會包含三種佈局方式標準流方式、浮動方式、定位方式，這三種佈局方式都要用來擺放盒子模型的，只要盒子擺放到合適位置後，佈局頁面就能夠自然而然完成了也會用的很輕鬆方便，如果單槍匹馬的去使用其中一種方式，去進行網頁佈局開發是很吃力而且還做不到其它種類方式的效果，我想這並不是我們想要的吧!
為什麼需要 CSS 浮動?
為什麼需要 CSS 浮動來佈局頁面呢? 這是一個很好的問題你可以先思考怎麼能夠使用標準流做到，如何讓多個塊級元素也就是盒子模型水平排成一列呢? 不管你怎麼使用你一定沒辦法在標準流中做到這樣的操作那是因為塊級元素就是獨佔一行非常霸道的。
你有學好的話你可能會使用行內塊元素那這樣就可以進行水平排列，又或者是使用塊元素的轉換把塊元素轉換成行內塊元素這樣就能夠做到水平排列組合了，你這樣做確實可以實現但是呀! 轉換後的行內塊元素之間會有縫隙，縫隙與縫隙之間的距離你沒辦法去控制，這是一項很致命的缺點，一般我們希望能夠控制盒子模型與盒子模型之間的空隙，非常講究的! 又或者是做到沒有縫隙，如果是使用標準流是沒辦法做到的控制縫隙。
接下來在問問你，要怎麼做到兩個盒子水平並排，一個盒子左對齊一個盒子右對齊中間是沒有東西的，在有些網站中非常常見但是你能夠用標準流做出這樣的效果嗎? 你可以停下來思考怎麼發揮你的標準流作法做出來我想一定很難吧! 難到我都不知道怎麼做了這時候 CSS 浮動就要登場了，
因為網頁中有很多佈局方式標準流是沒辦法做出來，標準流還是有一個極限被限制，此時 CSS 開發者才又開發了 CSS 浮動就能輕鬆完成剛剛那兩個問題，為什麼呢? 因為浮動會改變元素標籤的排列方式，浮動的最常應用場景是可以讓多個塊級元素一行內水平排列並顯示呈現出來。
點我瞭解 小青如何每月多賺5位數台幣標準流與浮動使用時機是什麼時候?
- 多個塊級元素縱向 ( Y軸 ) 排列請使用標準流
- 多個塊級元素橫向 ( X軸 ) 排列請使用浮動 ( float )
CSS 浮動 ( float ) 是什麼?
為什麼需要浮動我們已經知道了，那倒底 CSS 浮動是什麼我們就有必要好好了解一下了，浮動 ( float ) 屬性是用於創建浮動框，飄浮移動到一邊直到碰到左側或是右側邊緣或是碰到另一個浮動框，簡單來說浮動就是飄在空中，一定需要靠在邊緣處你可以指定靠在哪一側。
CSS 浮動語法如下表示
元素選擇器 { float: 屬性值; }
| CSS浮動屬性值 | CSS浮動描述 |
| none | 元素不浮動 ( 默認 ) |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
不用懷疑 CSS 浮動的屬性值就是那麼少，不是左浮就是右浮要不然都通通不要浮動，還要知道一點我們是要讓行內塊元素浮起來，行內塊元素的特性還知道嗎? 它就是一行裡頭可以有多同類型的行內塊元素還能夠控制自己的寬度與高度，現在我們可以通過 CSS 浮動讓它飄起來，假設一行內有 2 個行內塊元素，想做出上節我們說的一個靠左一個靠右的效果，我們來看看怎麼作吧!
現在只要給第一個行內塊元素我們賦予 CSS 浮動屬性靠左 ( left )、另一個行內塊元素我們給他 CSS 浮動屬性值是靠右 ( right ) 這樣就能做出一行內一個靠左一個靠右的效果了，是不是很方便呢? 如果不相信的話我們來創建一個簡單的 HTML 結構骨架，在裡頭新增 2 個 <div> 盒子模型標籤這樣就可以了，完成好 HTML 結構骨架後存檔先打開網頁看看是不是網頁呈現方式是標準流呀! 沒錯的! 就是標準流從上到下顯示盒子模型標籤。
<body>
<div class="left">我是盒子01</div>
<div class="right">我是盒子02</div>
</body>
我們接下來寫 CSS 屬性吧! 這次我們要先把盒子撐大還記得 CSS 屬性怎麼去使用嗎? 就是使用寬度與高度，寬度的值我們給個 200px、高度的值我們也是給個 200px，因為盒子模型是透明的還需要給個背景顏色我們給個紅色，最後是要來看看今天剛學習到的 CSS 浮動屬性，來看看真的還是假的盒子模型會一個跑去靠左、一個會跑去靠右，那我們先把值都填好，但別忘了這兩個盒子都要先取名唷! 就是去 Class 屬形名稱，不然你沒辦法去控制唷!
<style>
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: red;
float: right;
}
</style>
完成好 CSS 後你在存檔並用瀏覽器打開網頁看看你會發現一個盒子跑到左側一個盒子跑到右側實現了我們想要的結果了，不信的話你可以動手自己把這些 HTML 代碼與 CSS 代碼動手寫寫看一遍你就會更加的了解 CSS 浮動的左浮動與右浮動了，你可能還會想那如果兩個盒子模型都加入靠左呢? 那當然這兩個盒子會緊貼在一起並排顯示，相反的如果兩個盒子都靠右呢? 當然這兩個盒子模型都會跑去右側並靠在一起唷!
- 如果使用 CSS 浮動靠左，盒子模型就會浮起來靠在左側瀏覽器邊緣
- 如果使用 CSS 浮動靠右，盒子模型就會浮起來靠在右側瀏覽器邊緣
- 同時使用 CSS 浮動靠左，給 2 個盒子那他們會一起相鄰靠左側瀏覽器邊緣
- 同時使用 CSS 浮動靠右，給 2 個盒子那他們會一起相鄰靠右側瀏覽器邊緣
- 如果寫嵌套關係，大盒子是父級、小盒子是子集，那小盒子浮動左側則會貼在大盒子內左側邊緣
CSS 浮動的特性有哪些?
CSS 浮動特性非常重要，是因為給元素標籤加入浮動後整個以前的元素標籤就會發生變化，但是變化什麼呢? 以前的默認的排列方式是固定的狀態，你只要賦予該元素標籤 CSS 浮動後默認就不在是默認，你能夠指定他們的排列方式是靠左還是靠右，這點我相信剛剛經由上節的介紹你應該很清楚了吧! 那 CSS 浮動你學得好不好會影響到後面你進行網頁佈局的狀態，所以需要好好了解並加以掌握。
那接下來我們是必要了解 CSS 浮動自己的特性與特色，當然有很多特點不過我們只談最具有特色的也是浮動自已才有的功能，在別的 CSS 屬性樣式幾乎沒有這樣的特點，總共有 3 點如下表示
- 浮動元素能脫離標準流 ( 脫標 )
- 浮動的元素會一行顯示，並會將元素頂部對齊
- 浮動的元素會具有行內塊元素特性
知道了這 3 個特點特性我們在單獨通通拿出來好好的去討論，這樣你會比較好去理解也才能夠用的比較順心。
點我瞭解 小青如何每月多賺5位數台幣CSS 浮動特性 – 脫離
在 CSS 浮動當中，浮動元素能夠脫離標準流，也就是說今天你給盒子模型加入 CSS 浮動屬性後，原本標準流就是從上到下排列盒子模型，加完浮動後你能夠讓盒子模型進行靠左或是靠右進行排列，講簡單點就是能夠讓盒子模型水平排列 ( X軸 ) 並排排在一起了。
- 脫離標準流的普通控制 ( 浮起 )
- 移動到你指定的位置 ( 動作 )
- 由於上面兩點特性合起來會稱為浮動 ( 脫標 )
- 浮動的盒子不會再保留原先的位置
如果你不懂什麼是脫標，就是指脫離標準流的縮寫，各取開頭所以才叫脫標，反正就是浮動的意思，其中第 4 點比較難理解盒子不會再保留原先的位置，你可能會想為什麼呢? 舉個例子像你今天要搭火車、搭公車都要進行排隊的，不是大家都會排隊嗎? 只有一列從前到後那這個不是似曾相識嗎? 就是網頁中的標準流阿!!!
沒錯吧! 那我們再來看唷! 今天排隊中隊伍有個人突然獲得能力，這能力是飄在空中，那第二個排隊的人獲得能力飄在空中，此時他以前的位置並不再是他的了，後面的人會往前去替補他的位置，但是浮在空中的人 ( 空中人 ) 此時級別已經不再是跟排隊的人 ( 地面人 ) 一樣了，也就是說一個是在空中的領域一個是在地上的領域，那地上領域的人看見前一位飛生了前面有空位了當然會去自動補上，這你沒問題吧!
如果你去思考飛起來的人 ( 空中人 ) 和地上的人 ( 地面人 ) 會有一個很有趣的現象，就是飛起來的人往下看地下的人，可以看見剛補上來的地面人的頭，也就是說地下的人往上看可以看見剛剛飛生的人在他的正上方唷! 如果這邊不太了解後面我們會來寫寫看代碼你就能夠了解為什麼了。
我們先來創建一個全新的 HTML 結構框架，在裡面新增兩個盒子模型，為了方便觀察一個我們 class 選擇器取名為 box01 另一個 class 屬性取名為 box02 寫好後我們進行存檔，並用網頁開啟你剛剛寫好的 HTML 結構你一定看不見東西，所以我們需要在寫個 CSS 屬性，還知道為什麼看不見盒子模型嗎? 因為盒子模型本身是透明的。
<body>
<div class="box01">我是盒子01</div>
<div class="box02">我是盒子02</div>
</body>
因為看不見透明的盒子，我們需要指定 class 類選擇器 box01 和 box02 給定盒子模型寬度與高度以及背景顏色，box01 寬度值設定 300px、box01 高度值設定 300px、box01 背景顏色設定紅色，box02 寬度值設定 500px、box02 高度值設定 500px、box02 背景顏色設定藍色，存檔後你會看見呈現在 HTML 中的這兩個呈現的方式就是標準流，因為我們還沒給這兩個盒子 CSS 浮動效果。
<style>
.box01 {
width: 300px;
height: 300px;
background-color: red;
}
.box02 {
width: 500px;
height: 500px;
background-color: blue;
}
</style>
接下來我們要來試看看飛在空中的盒子和地上的盒子會擦出什麼火花以及空中的世界和地面的世界是怎麼回事呢?! 這點你應該很好奇吧! 我們把第一個盒子 box01 加入 CSS 浮動屬性，讓這個盒子模型向左浮動，而另一個盒子模型不給予浮動效果。
<style>
.box01 {
width: 300px;
height: 300px;
background-color: red;
float: left;
}
.box02 {
width: 500px;
height: 500px;
background-color: blue;
}
</style>
當你存檔後你在回到網頁看的時候你會發現第一個盒子模型 box01 一樣是在原本的位置，但是他是飄浮在空中唷! 而第二個盒子模型 box02 因為看見前面那個 box01 盒子模型進行飛生了，那它只好往前走去補地面的空位，所以你看見的網頁狀態是 box01 和 box02 是疊在一起的，我們是故意使這裡兩個盒子模型寬度與高度不同，如果 2 個盒子模型相同大小疊在一起你只會看見浮在空中的那一個，也就是賦予浮動那個一個 box01。
從這樣觀察你還能發現一件事，會對你往後佈局視角有一定程度的改變，這話怎麼說呢? 因為我們看向網頁也就是盯著螢幕，網頁就像是一個世界一樣我們是從上往下看，就如同你坐飛機從高空往下看，如果你沒坐過飛機你想成從高樓往外看向地面那個視角，如果如果你在沒想法你想成就是上帝視角去觀看世界，只要兩件東西大小出現在你視野那你看見的東西有可能不只一個，因為他們疊在一起了!
畢竟網頁就是平面呈現給你看以及給瀏覽者閱讀，只有在我們有學習網頁撰寫技術才會了解其實網頁也是有上下層關係甚至是能夠做到 3D 的效果，不過 3D 那是後來 CSS3 以後才新增的功能，前期你先學好平面的設計就夠用了唷。
CSS 浮動脫標要注意哪幾點:
- 觀看網頁呈現出平面效果，但實際上可能並不
- 觀看網頁就是上帝視角，所以所有網頁元素才都是平面
- CSS 可以做出 3D 立體效果，但初學先掌握平面技術即可
- 要注意 CSS 浮動層級已經跟一般標準流不同了
- CSS 浮動與一般元素選擇器，互相重疊此時你在網頁只會看見 CSS 浮動的盒子模型
- CSS 浮動與一般元素選擇器，互相重疊一般元素選擇器沒有消失，只是在 CSS 浮動下面
CSS 浮動特性 – 浮動元素一行顯示
接下來，來看看如果多數個盒子模型都設置了 CSS 浮動會發生什麼事呢? 也就是說今天有 3 個盒子模型，我們都給這 3 個盒子模型設置 CSS 浮動屬性，屬性值都給左浮動那你猜猜看會發生什麼事呢? 在這裡你可以停下來好好思考會發生什麼事情，它們會一起靠左並疊在一起嗎? 還是會並排靠左顯示呢?
答案是會並排靠左一個一個顯示在網頁上，因為大家都左浮動了那我們前面不是說浮動是在空中，今天這 3 個都浮起來了，那勢必要遵守空中的規則，所以第一個浮的會先靠左側而第二個會貼在第一個後面的邊緣處，之後的每一個都會遵守這樣的規則去排列，也就是說在空中排隊。
我們來動手做做看這個例子吧! 首先創建一個全新的 HTML 結構骨架，在裡頭新增 3 個盒子模型標籤並使用 class 類選擇器給這三個取名為 one、two、three，完成後存檔你到網頁看是會顯示透明的盒子模型，你完全看不見效果，這是很正常的因為你還沒加入 CSS 屬性唷!
<body>
<div class="one">我是盒子01</div>
<div class="two">我是盒子02</div>
<div class="three">我是盒子03</div>
</body>
讓盒子模型不在是透明吧! 接下來我們讓每個盒子的寬度都一樣 200px 而第一個盒子 one 的高度設置 200px、第二個盒子模型高度設置 500px、第三個盒子模型高度設置 450px，背景顏色順序依照順序設置為紅色、綠色、藍色，CSS 浮動效果每一個盒子都加入左浮動。
<style>
div {
width: 200px;
float: left;
}
div .one {
height: 300px;
background-color: red;
}
div .two {
height: 500px;
background-color: green;
}
div .three {
height: 500px;
background-color: blue;
}
</style>
完成 CSS 元素選擇器的指定後，進行存檔你會發現整個網頁上的盒子有顏色、寬度、高度，最重要的事你會看見每個盒子都是靠左側對齊的並在一行顯示，我們故意用每個盒子模型高度都不同，但是不影響水平 ( X軸 ) 方向並排排列，你還會看見這些盒子模型都是貼著對方的邊緣，還有大家也會緊緊貼著瀏覽器最上緣處，如果你拉動你的瀏覽器你會看見這些盒子模型會被擠壓到另一行去，但也不影響並排的排列顯示效果。
- 多個 CSS 浮動後的盒子會並排顯示、貼著對方邊緣
- 多個 CSS 浮動後的盒子，最大共同點都會貼在上緣處邊緣
- 浮動元素互相貼在一起不會有縫隙
- 父元素盒子寬度裝不下浮動後的子級盒子，此時子級盒子會呈現上下兩排狀態
CSS 浮動特性 – 浮動元素具有行內塊特性
剩下最後一個 CSS 浮動特性，是浮動元素具有行內塊元素的特性，但是我們可以使用 CSS 浮動元素給予任何的元素標籤浮動，就像是你給 <p> 段落標籤賦予 CSS 浮動後，原本 <p> 段落標籤是塊元素，但是今天給它浮動屬性後它就再也不是塊元素而是會具有行內塊元素特性唷! 這功能有點像是轉換的功能，但是不太一樣，是因為被賦予 CSS 浮動後就會自動傳換成行內塊元素相似的特性唷!
我們舉個例子來看看吧! 首先創建一個 HTML 結構骨架，在裡頭生成一個 <span> 標籤，你記得 <span> 標籤是塊元素還是行內元素嗎? 答案是行內元素，我想你應該還記得行內元素的特性吧! 如果忘記了可以複習之前我寫的行內元素那篇文章唷! 行內元素的特性是一行能顯示多個行內元素，但不能設置寬度與高度。
<body>
<span>Hello我是小青</span>
</body>
接下來我們設置 CSS 樣式，我們就是不管 <span> 行內元素不會顯示寬度與高度以及背景顏色，通通寫 CSS 樣式進去，寬度設置 200px、高度設置 200px、背景顏色設置紅色。
<style>
span {
width: 200px;
height: 200px
background-color: red;
}
</style>
存好檔案後你打開網頁呈現出來的東西只有文字，這樣是錯的嗎? 當然不是錯的因為這是正常的，行內元素是沒辦法進行 CSS 屬性改變，那今天我們在加上 CSS 浮動看看，看會發生什麼事呢?
<style>
span {
width: 200px;
height: 200px
background-color: red;
float: left;
}
</style>
你會發現神奇的事，竟然只要加入 CSS 浮動就能夠顯示寬度、高度、背景顏色了! 但這樣沒什麼能夠展現出浮動特性並具有行內塊元素的感覺，沒關係你在 HTML 結構骨架中在新增一個 <span> 標籤，完成後你存檔在看看現在有裡個 <span> 標籤會發生什麼事呢?
<body>
<span>Hello我是小青</span>
<span>Hello我是小青</span>
</body>
你會發現兩個 <span> 標籤並排靠左顯示，最大的特色是還能夠改變寬度、高度、背景顏色，那這不是就是原本行內塊元素具有的特色嗎?! 沒錯唷! 當然你寫個塊元素並在塊元素的 CSS 屬性樣式中，加入 CSS 浮動屬性也會被轉變成具有行內塊元素的特性。
這邊我們總結一下，也就是說如果行內元素、塊元素有了 CSS 浮動屬性的添加，你就不需要使用轉換的模式來進行改變了，因為浮動就會具有行內塊元素的特性一行能顯示多個還可以控制 CSS 很多樣式的設定
- 塊元素沒設置寬度、高度，會默認和父級一樣寬、高
- 呈上，但是如果加入 CSS 浮動後，因為沒設置寬與高，它個盒子大小會根據內容來決定
- 浮動後的盒子模型中間是沒有縫隙，多個的話是彼此相連
- CSS 浮動塊元素或是行內元素後，此時它們都會具有行內塊元素特性
CSS 浮動會經常與標準流父級搭配使用為什麼?
經過剛剛我們的 CSS 浮動特點介紹，只要給塊元素或是行內元素左浮動或是右浮動效果就會貼在瀏覽器的左邊緣或是右邊緣，但想想好像不太對勁，是因為我們沒有給盒子模型父級元素，如果單單寫盒子浮動靠左或是靠右顯示的話，那盒子模型的父元素是誰呢? 你可以想想看，答案是 <body> 標籤，而 <body> 標籤就是瀏覽器的整體呀!!!
這樣可不行，我們希望盒子模型就是可以在一個限定的盒子當中，什麼意思呢? 意思是說我們網頁佈局中不是會有很多盒子模型嗎? 每個盒子模型可能展示 3C 產品、有的盒子模型是希望能夠展示同類型的產品…等，那如果沒有先規劃好一個大盒子做歸類會很亂，而且盒子模型也會亂跑。
一般作法我們會希望把一個大盒子固定在頁面中間，並使用 class 類選擇器做命名，而大盒子裡頭的小盒子會使用浮動來進行並排展示，那大盒子就是小盒子的父親又稱為父級元素，那當然子盒子是子級元素，那我們再回頭看父級元素就是標準流，因為我們希望使用者可以從上到下去瀏覽，那子盒子是使用浮動所以會形成並排顯示效果
- 佈局時父級元素盒子通常是希望是標準流效果，從上到下展示盒子模型
- 佈局時子級元素盒子通常是希望是浮動效果，從左到右顯示
- 要盡量避免不要使用沒有父級元素的子元素盒子模型
CSS 浮動佈局該注意什麼?
CSS 教學中基本上我們已經可以說是可以好好掌握了，但是還是有一些你在使用 CSS 浮動佈局時你需要注意的 2 個點，標準流會和浮動一起搭配使用，也就是說先用標準流的父級元素盒子模型從上到下排列位置，之後內部的子元素盒子模型希望使用浮動從左到右排列顯示。
第二點是要注意如果該元素浮動了，注意有沒有兄弟元素，如果有兄弟元素一般也會跟著去浮動，也就是說它們是有共同的父級元素盒子模型，而這些孩子元素要馬一起浮動要馬不要浮動，幾乎沒有人設計子元素其中一個浮動剩餘的子盒子不浮動，如果你記不起來或是沒有想法，就是這些子級元素就是兄弟，兄弟要馬共進退要馬共同耍廢。
要浮一起浮，你可能認為有的浮有的不浮會發生什麼事，下列我展示一下子級盒子模型有的浮有的不浮會發生的狀況，首先我們創建一個全新的 HTML 結構骨架標籤，在裡頭寫 1 個父級盒子模型標籤與 3 個子級盒子模型標籤。
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
</body>
完成 HTML 結構後你進行存檔，你一樣也是在網頁上看不見的因為是透明的盒子，這時候就勢必需要給 CSS 屬性拉! 父級元素盒子模型給大一點寬度設置 1000px、高度設置 1000px、背景顏色設置紅色，而子級盒子 class 為 one 的寬度設置 200px、高度設置 200px、背景顏色設置綠色，子級盒子 class 為 two 的寬度設置 300px、高度設置 300px、背景顏色設置藍色，子級盒子 class 為 three 的寬度設置 400px、高度設置 400px、背景顏色設置紫色。
<style>
.box {
width: 1000px;
height: 1000px;
background-color: red;
}
.one {
height: 200px;
height: 200px;
background-color: green;
}
.two {
height: 300px;
height: 300px;
background-color: blue;
}
.three {
height: 400px;
height: 400px;
background-color: purple;
}
</style>
存檔後你會在網頁中看見一堆盒子模型都是標準流顯示，但那不是我們想要的，我們這次是想要知道一部分不浮動看會有什麼效果，所以我們給 class 名為 two 和 three 的左浮動其他盒子模型都不浮動會發生什麼事呢?
- class 為 two 的會浮在 one 的正上面，而 three 會排在 one 的邊緣下方嗎?
- class 為 two 的會浮在 one 的邊緣下方，而 three 會在 two 的正下方嗎?
你認為是哪一個呢? 還是除了這兩個選項你有更好的答案呢? 這是一個思考題我會建議你停下來好好想想看，以前學習到的知識全部拿出來應用，答案是第二個才是正確的答案，你可能會說為什麼呀? 其實很簡單，第一個 one 盒子模型還是標準流並會獨佔一行、two 盒子模型已經浮起來了、three 也是標準流顯示，但是是在地下世界前面那一個 two 子標籤已經飛生了，所以會往前替補。
- 並不是所有浮動都會壓住標準流
- 浮動只會壓住後面來的標準流，如果浮動前面是標準流只會貼在它的下緣處
- 標準流在浮動前面時，標準流會獨佔一行不讓浮動近來它的上空
那在問你如果子盒子 one 浮動、two 標準流、three 浮動會發生什麼事呢? 可以開始花個時間作答，答案是 two 標準流去 one 浮動正下方，而 three 浮動會到 two 標準流正下方，不知道你有沒有茫掉呢? 哈哈希望你沒有!
還是把握原則浮動的前方有人先卡位也就是標準流先到，它就會禁止別人進入他們領空，因為他們獨佔一行空和地、那浮動的就是空中派的對地面沒興趣了，並會願意把地面讓給貪心的地面人 ( 標準流 ) 所以它們才會往前替補，但是它們進到浮動 ( 空中人 ) 地盤勢力就不會搶空中人的領空。
反正你把地面人 ( 標準流 ) 想成很貪心一派就對了，只要地面人先到的空中和地面就是都要全包，如果當下空中人 ( 浮動 ) 已經先在的地盤，後來才來到的地面人 ( 標準流 ) 會去佔領的空中人 ( 浮動 ) 陸地地盤，空中人 ( 浮動 ) 可以包容地面人 ( 標準流 ) 可以和平共處，那如果狀況相反前者是地面人 ( 標準流 ) 後來者的空中人 ( 浮動 ) 知道前面是地面人 ( 標準流 ) 也不會跟它們搶地盤會自己在它們下緣處發展勢力，你以這樣去想會比較好懂誰先誰後的概念唷!
- 先到的地面人 ( 標準流 ) 不會讓空中人 ( 浮動 ) 進來他們領域
- 先到的空中人 ( 浮動 ) 會讓陸地給地面人 ( 標準流 ) 和平共處
CSS 浮動你需要注意的兩個重點
- CSS 浮動和標準流的父盒子會搭配使用
- 一個兄弟元素浮動後其他兄弟也要浮動
CSS 浮動各類問題
基本上 CSS 教學中的浮動你已經學完了，接下來我們需要來想想實際開發中你會遇到的問題，按照道理 CSS 浮動元素盒子模型標籤都會有一個標準流父級元素盒子模型標籤，一起搭配使用很少有人拆開來使用尤其是單獨使盒子浮動，這你沒問題吧! 除非你有什麼特殊的需求或是你非要這個做不可，不然你一定不可能實現 CSS 浮動效果並排顯示，沒有使用父級元素去加以限制在盒子模型內盒子就是會亂跑，OK! 父級元素還有一個特點! 我們都能夠給高度訂值!
你可能想說高度沒什麼吧! 就是盒子的寬度與高度，設計的時候寬度給訂一個值、那高度不是也是嗎? 你這樣想沒錯! 這是一種固定寫死的高度，一般瀏覽者看見你這個盒子模型就是從上至下去觀看 ( 滑鼠滾輪 )，寬度使用 CSS 浮動並排顯示 5 個，那高度假設設置 500px 能塞下，上到下的盒子也是五個，這場景是你固定寫死方式是可以的!
但是! 但是! 還有一種設計思考，如果我要寫瀑布流怎麼辦? 我還能把父級元素盒子模型標籤寫死嗎? 那可就不行囉! 如果寫死高度就不是瀑布流了，假設你不知道什麼是瀑布流佈局設計，其實你是曾經看過並使用過的唷! 就是從一個頭部做起始點，一直往下拉一直拉你是拉不到底部的，Facebook 的設計還有 Pinterest 就都是使用瀑布流讓你一直拉不到底部。
那沒有底部就是關鍵，那就是父級元素盒子模型標籤沒有高度呀! 是不是呢?! 所以就不用設置高度就可以做到了嗎? 還是用什麼特殊方法能做到呢? 這邊先不告訴你答案讓你好好思考這問題，我在假設一個場景，像是有些新聞他們每篇報導有一個區塊是需要展示新聞盒子模型，也就是父級元素盒子模型，這個父級元素會因為報導的篇幅有長有短，那父級盒子的高度是不是也是不需要設置呢?!
以上我舉例的兩個在真實例子，你在生活場景一定碰過，現在你也有所感觸到底是怎麼做的呢? 當然你也可以根據每篇報導的長度去設置一個固定的長度，但是你去為每篇報導進行人工設置父級盒子高度是有點累人的，一兩篇還好那上萬篇呢? 還需考慮寫文章的記者還要會 CSS 語法，實在是不友善，雖然這方法是可行，缺點就是不太人性化。
那對於這個思考問題我們當然是要用最簡單而且最好的方式，因為文章的長短父級盒子模型能夠做到因為子級內容長度會跟著改變，子級元素塞的越多造成的長度越長，父級盒子模型的長度自己能夠自動匹配拉長就可以，這一點是我們期望並想要做到的，這個方法我們在下一節會開始來探討如何做到的!
- 所有父級盒子模型都需要設置高度嗎?
- 所有父級盒子模型高度要寫死嗎?
CSS 浮動能清除浮動嗎?
OK! 根據前面的思考，你心中一定有一個方案，我懂你的就是直接給父級盒子模型元素高度不進行設置，這樣就能夠因為子級盒子模型去匹配，並撐大父級盒子模型的高度了?! 這答案先保留我們直接來實做看看到底是不是真的這樣呢?!
首先創建一個全新的 HTML 結構骨架，在裡頭新增一個 <div> 盒子模型標籤並使用 class 類選擇器命名為 box 這一個盒子是父級元素，在父級元素裡頭新增 2 個子級盒子模型標籤 class 類選擇器命名為 one 和 two，存檔好後使用瀏覽器打開，當然你是看不見任何東西的!
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
</div>
</body>
因為 <div> 盒子模型就是透明的，所以我們必須方便觀察要設置一下寬度與高度還有背景顏色看得見盒子唷! 父級盒子模型 box 設置寬度 800px、高度不要設置、背景顏色紅色，子級盒子模型 one 設置寬度 200px、高度 200px、背景顏色設置綠色，另一個子級盒子模型 two 設置寬度 300px、高度300px、背景顏色設置藍色，回過頭到父級元素把它設置在中間還有邊框細線。
<style>
.box {
width: 800px;
background-color: red;
border: 1px soild black;
margin: 0 auto;
}
.one {
height: 200px;
height: 200px;
background-color: green;
}
.two {
height: 300px;
height: 300px;
background-color: blue;
}
</style>
完成後你進行存檔並在瀏覽器呈現出來，確實父級盒子模型元素被撐開，也印證了不設置高度方法是可行的!!! 對沒有錯但是別忘了這是標準流唷! 最終我們是希望子盒子是浮動的並徘顯示，我們加入 CSS 浮動屬性給那 2 個子級盒子模型標籤吧!
<style>
.box {
width: 800px;
background-color: red;
border: 1px soild black;
margin: 0 auto;
}
.one {
height: 200px;
height: 200px;
background-color: green;
float: left;
}
.two {
height: 300px;
height: 300px;
background-color: blue;
float: left;
}
</style>
加入完 CSS 浮動屬性給子級盒子模型靠左並徘顯示，你存檔後使用瀏覽器打開你會發現 hmmm 父級盒子模型變成扁的拉! 沒有高度了，而子盒子確實並徘顯示但是是脫離父級盒子模型阿! 沒錯唷! 如果你有認真學並弄懂 CSS 浮動特性你並不會覺得奇怪，因為子級盒子模型浮起來後就脫離標準流了，那標準流特性就是獨佔一行，所以你才會看見子級盒子通通被父級盒子模型丟出去了。
所以父級盒子模型標籤因為沒有了子級盒子模型標籤，那高度就會變成 0px 就顯示扁扁的拉! 因為這樣父級元素盒子模型與父級盒子模型，之間是兄弟關係就會補上來，因為子級盒子模型已經浮動了它就會跟父級元素盒子模型的兄弟重疊在一起，佈局會因為這樣變成很難看，所以才需要把 CSS 浮動清除才有可能做到。
由於父級盒子模型很多情況下是不方便給高度，但是! 但是! 子級盒子模型使用 CSS 浮動後想要並徘顯示卻因為飛生了! 父級盒子模型高度就會變成 0，此時就會影響後面的兄弟父級盒子模型因為是標準流會補上位置。
所以為什麼需要清除浮動的幾個重點:
- 父級盒子模型不設置高度，子級盒子模型確實可以撐大盒子高度，因為兩者都是標準流
- 當子級盒子模型設置浮動後就不在是標準流，會脫離父級盒子模型那高度就會變成 0
- CSS 浮動元素並不會佔用標準流位置，後面的標準流會往前替補浮動後位置
- 浮動後的子級盒子模型會與原本父級盒子模型的兄弟 ( 標準流 ) 呈現重疊現象
CSS 清除浮動本質
我們又根據上一節的正實，父級盒子模型不加高度、子級盒子模型使用浮動後一定會脫離開來又呈現出父級盒子模型高度 0 的狀況，這節就來談談 CSS 清除浮動的本質有哪些呢?
- 清除浮動的本質是清除浮動元素造成的影響
- 如果父級盒子模型本身有高度，則不需要清除 CSS 浮動
- 清除 CSS 浮動後，父級盒子模型就會根據浮動後的子級盒子模型進行自動高度檢測
- 清除浮動的本質是清除浮動元素，脫離標準流造成的影響
CSS 清除浮動語法是什麼?
CSS 清除浮動語法是什麼呢?! 其實很簡單的並不難，我們來看看語法怎麼寫吧!
選擇器 { clear: 屬性值; }
你只要先指定你想要改變的子級盒子模型元素，在給它 clear 就是清除的意思，一般我們會先進行選擇器的選定再填入屬性值，不然你怎麼跟網頁說你要清除吧! 屬性值有 left、right、both，但是實際開發前端工程師都是使用 clear: both;
| 浮動清除屬性值 | 浮動清除描述 |
| left | 不允許左側有浮動元素(清除左側浮動的影響) |
| right | 不允許右側有浮動元素(清除右側浮動的影響) |
| both | 同時清除左右兩側浮動 |
那實際上是使用 clear ( 清除浮動 )，但是清除浮動實際上是進行閉合的動作，也就是閉合浮動，之前我們不是說浮動就是空中人嗎? 他們很樂意跟標準流 ( 地面人 ) 和平共處，但是前提是空中人是先到的他們很樂意接受標準流 ( 地面人 )，但是! 但是! 今天父級盒子模型的整片地面就是標準流 ( 地面人 )，今天突然在人家地盤飛生一定被趕走到外面去所以才造成高度是 0。
因為想要飛生的浮動 ( 空中人 ) 在人家地盤上就要跟標準流 ( 地面人 ) 簽訂一份合約，這份合約就是必須要清除以前的地面的所有權也就是 clear ( 清除 )，只要清除後你就能在父級盒子模型標準流中，有使用空中的權利，這樣你裡了解了嗎?! 但是你只能在父級地面人的領空不能在外頭，所以才又說閉合在地面人 ( 標準流 ) 裡頭。
那清除浮動總共有 4 總方法策略，分別是
- 額外標籤法又稱為隔牆法
- 父級添加 overflow
- 父級添加 after 偽元素
- 父級添加雙偽元素
這四種方法你都必須了解，因為不同團隊在進行開發會統一一種做法，或是你在讀別人網站是用其中某一種方法時，你才會知道原來這裡對方是使用這種方式呀! 每一個方法都有自己的特點並且都能夠實現出清除浮動的動作，沒有一個最完美只有看你當時想用什麼而已，如果硬要說那些最好只能說後面的 3 種方法會比較好用。
你可能會說! 奇怪不是加入 clear 屬性就好了嗎? 還有這四種方法??? 對呀! 你看空中人和地面人雖然說好並簽訂合約，暫時能夠使用空權但是合約終究是合約，有些空中人還是會進行違約或是不遵守當初的規則，就像明明紅燈還是有人會去闖一樣，這時候地面人 ( 標準流 ) 就會設置一到牆以防止浮動 ( 空中人 ) 越界跑出去外面的領空，提到的四種方法就是用來阻擋浮動 ( 空中人 ) 的方法唷!
這些策略的初衷都是希望進行 CSS 浮動的閉合做動 ( 簽訂合約 )，只讓浮動在父級盒子模型內部乖乖待者就好，並不希望浮動後的子級盒子模型不乖跑到外面的區域去影響到別人的領地了。
CSS 清除浮動 – 額外標籤法
不遵守規則的浮動 ( 空中人 )，標準流 ( 地面人 ) 想出了額外標籤法又稱為隔牆法，專門治理那些不守規則的浮動 ( 空中人 )，你應該看見關鍵字了吧! 牆會設一到牆嗎? 是的沒有錯，你可以想想看這道牆會設置到哪裡呢?
答案是隔牆法會設置在會浮動元素末尾，並添加一個空的元素標籤，你可能會傻眼什麼空元素標籤阿! 就是在造一個空的 <div> 盒子模型，就是這麼簡單塞在最後一個浮動元素後面就可以了，例如下列表示。
<div style=" clear: both;"></div>
當你這樣做就是會在最後一個浮動 ( 空中人 ) 的後面設定一道牆在那邊，浮動他們想在亂跑就不能夠跑出去了，我們來實做吧! 首先創建一個全新的 HTML 結構骨架，在裡頭新增一個 <div> 盒子模型標籤並使用 class 類選擇器命名為 box 這一個盒子是父級元素，在父級元素裡頭新增 3 個子級盒子模型標籤 class 類選擇器命名為 one 和 two，還有一個子盒子我們直接把 CSS 屬性 clear 和屬性值 both 都寫好，就是把牆設定好，存檔好後使用瀏覽器打開，當然你是看不見任何東西的!
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
<div style=" clear: both;"></div>
</div>
</body>
因為 <div> 盒子模型就是透明的，所以我們必須方便觀察要設置一下寬度與高度還有背景顏色看得見盒子唷! 父級盒子模型 box 設置寬度 800px、高度不要設置、背景顏色紅色，子級盒子模型 one 設置寬度 200px、高度 200px、背景顏色設置綠色、左浮動，另一個子級盒子模型 two 設置寬度300px、高度 300px、背景顏色設置藍色、左浮動，回過頭到父級元素把它設置在中間還有邊框細線。
<style>
.box {
width: 800px;
background-color: red;
border: 1px soild black;
margin: 0 auto;
}
.one {
height: 200px;
height: 200px;
background-color: green;
float: left;
}
.two {
height: 300px;
height: 300px;
background-color: blue;
float: left;
}
</style>
當你寫完 CSS 存檔後使用瀏覽器打開檔案，你會發現子級盒子模型會乖乖的並徘顯示乖乖的，而父級盒子模型也會顯示高度了! 這樣就能夠完成我們一值很困擾的問題啦! 是不是心中困惑解開啦! 而那到牆你或許有些疑問，其實你不需要擔心因為盒子模型本身是透明的又讓它賦予 CSS clear 屬性，就像合約一樣是一道隱形的牆在約束浮動們 ( 空中人 )。
CSS 浮動隔牆法優缺點分析
- 優點 : 通俗易懂，簡單用方便
- 缺點 : 添加一些無意義標籤元素，使 HTML 結構性變差
- 缺點 : 添加的空標籤必須是塊級元素標籤!
CSS 清除浮動 – 父級添加 CSS 屬性 overflow
我們在來看看第二種策略方式吧! 父級添加 overflow，你可以給父級盒子模型 CSS 屬性當中添加 overflow 屬性，屬性值你可以給三種方式 hidden、auto、scroll，這跟上面那一個隔牆法策略完全不同，這一個策略是給父級盒子模型添加 CSS 屬性。
首先創建一個全新的 HTML 結構骨架，在裡頭新增一個 <div> 盒子模型標籤並使用 class 類選擇器命名為 box 這一個盒子是父級元素，在父級元素裡頭新增 3 個子級盒子模型標籤 class 類選擇器命名為 one 和 two，存檔好後使用瀏覽器打開，當然你是看不見任何東西的!
<body>
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
</div>
</body>
因為 <div> 盒子模型就是透明的，所以我們必須方便觀察要設置一下寬度與高度還有背景顏色看得見盒子唷! 父級盒子模型 box 設置寬度 800px、高度不要設置、背景顏色紅色，子級盒子模型 one 設置寬度 200px、高度 200px、背景顏色設置綠色、左浮動，另一個子級盒子模型 two 設置寬度300px、高度 300px、背景顏色設置藍色、左浮動，回過頭到父級元素把它設置在中間還有邊框細線。
記得最重要的是在父級標籤設置一個我們剛剛學的 CSS 屬性 overflow，屬性值那 3 種都可以但是前端工程師最常是使用 hidden 屬性值。
<style>
.box {
width: 800px;
background-color: red;
border: 1px soild black;
margin: 0 auto;
overflow: hidden;
}
.one {
height: 200px;
height: 200px;
background-color: green;
float: left;
}
.two {
height: 300px;
height: 300px;
background-color: blue;
float: left;
}
</style>
當你寫完 CSS 存檔後使用瀏覽器打開檔案，你會發現子級盒子模型會乖乖的並徘顯示乖乖的，而父級盒子模型也會顯示高度了! 這樣就能夠完成我們一值很困擾的問題啦! 這樣你又學到一種方法啦! 好像不太對唷! 這方法我們在那篇 CSS 教學盒子模型那篇文章好像用過吧! 你還記得嗎? 在外邊距合併的時候我們用過 overflow。
這 CSS 語法太強了可以防止外邊距合併、又能清除浮動，其實還能做的的事情還很多，我們就先繼續賣關子一下吧! 還不是正式要介紹它的時機，現在你只要知道它很猛很強大就對了!
父級添加 CSS 屬性 overflow 優缺點分析
- 優點 : 代碼簡潔、使用方便
- 缺點 : 無法顯示溢出部分 ( 如果盒子露出去會直接切掉 )
CSS 清除浮動 – 父級添加 after 偽元素
接下來我們來談談第三種方法，父級添加 after 偽元素，這個方法其實是標籤法的升級版也就是火力加強版而已，它也是給父級盒子模型添加一個 CSS 屬性，至於是什麼語法我們來看看吧!
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、IE7 專用*/
*zoom: 1;
}
你一看到這代碼一定傻眼哇賽要打這麼一大坨，有些你還看不懂是什麼意思也…其實你現在只要會使用這坨代碼就好，只要知道有這方法就可以了，當你知道什麼是偽元素之後我們才會去仔細理解地底這坨東西表達的意思即可唷!
我們來是看看吧! 首先創建一個全新的 HTML 結構骨架，在裡頭新增一個 <div> 盒子模型標籤並使用 class 類選擇器命名為 box 這一個盒子是父級元素，在父級元素裡頭新增 3 個子級盒子模型標籤 class 類選擇器命名為 one 和 two，存檔好後使用瀏覽器打開，當然你是看不見任何東西的!
<body>
<div class="box clearfix">
<div class="one">one</div>
<div class="two">two</div>
</div>
</body>
因為 <div> 盒子模型就是透明的，所以我們必須方便觀察要設置一下寬度與高度還有背景顏色看得見盒子唷! 父級盒子模型 box 設置寬度 800px、高度不要設置、背景顏色紅色，子級盒子模型 one 設置寬度 200px、高度 200px、背景顏色設置綠色、左浮動，另一個子級盒子模型 two 設置寬度300px、高度 300px、背景顏色設置藍色、左浮動，回過頭到父級元素把它設置在中間還有邊框細線。
記得最重要的是在把剛剛那一大坨 after 偽元素給貼進到 <style> 標籤裡頭，還要記得在父級盒子模型標籤裡頭的 class 屬性在補上 clearfix 因為我們要調用這一個 CSS 屬性唷! 不然寫了沒用等於沒功能
<style>
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、IE7 專用*/
*zoom: 1;
}
.box {
width: 800px;
background-color: red;
border: 1px soild black;
margin: 0 auto;
}
.one {
height: 200px;
height: 200px;
background-color: green;
float: left;
}
.two {
height: 300px;
height: 300px;
background-color: blue;
float: left;
}
</style>
當你寫完 CSS 存檔後使用瀏覽器打開檔案，你會發現子級盒子模型會乖乖的並徘顯示乖乖的，而父級盒子模型也會顯示高度了! 這樣就能夠解決我們一直很困擾的問題啦! 這樣子你又會學到一種方法啦! 但是這個方法是使用到偽元素的方法，至於偽元素我們還沒學到你先知道有這方法就可以了，這一個作法也是在最後一個子級盒子模型新增一個透明的盒子唷，就是生成隱形盒子但是是使用 CSS 去生成。
點我瞭解 小青如何每月多賺5位數台幣父級添加 after 偽元素優缺點分析
- 優點 : 沒有添加塊級標籤元素，使 HTML 結構更簡潔
- 缺點 : 無法照顧到低版本瀏覽器，或是不知名瀏覽器
CSS 清除浮動 – 父級添加雙偽元素
接下來來討論第 4 種方法也是最後一種方法了，這種方式也是給父級元素添加一段 CSS 語法，我們來看看語法是什麼吧!
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/*IE6、IE7 專用*/
*zoom:1;
}
哇勒!!! 也是一大坨，但是你仔細看你其實是可以看得懂的，一樣做法也是新增一道牆，通過上一節做法我知道偽元素就是會插入一道牆，那你看到這次寫 before 是前面的意思，而 after 是後面的意思，那我們可以猜就是前面塞一道牆、後面也塞一道牆對嗎? 沒錯唷! 就是這樣，也就是說在父級盒子模型元素的內部前面和後面都注入一到牆，這樣浮動 ( 空中人 ) 就不會往前跑或是往後跑了。
我們來是看看吧! 首先創建一個全新的 HTML 結構骨架，在裡頭新增一個 <div> 盒子模型標籤並使用 class 類選擇器命名為 box 這一個盒子是父級元素，在父級元素裡頭新增 3 個子級盒子模型標籤 class類選擇器命名為 one 和 two，存檔好後使用瀏覽器打開，當然你是看不見任何東西的!
<body>
<div class="box clearfix">
<div class="one">one</div>
<div class="two">two</div>
</div>
</body>
因為 <div> 盒子模型就是透明的，所以我們必須方便觀察要設置一下寬度與高度還有背景顏色看得見盒子唷! 父級盒子模型 box 設置寬度 800px、高度不要設置、背景顏色紅色，子級盒子模型 one 設置寬度 200px、高度 200px、背景顏色設置綠色、左浮動，另一個子級盒子模型 two 設置寬度300px、高度 300px、背景顏色設置藍色、左浮動，回過頭到父級元素把它設置在中間還有邊框細線。
記得最重要的是在把剛剛那一大坨雙偽元素給貼進到 <style> 標籤裡頭，還要記得在父級盒子模型標籤裡頭的 class 屬性在補上 clearfix 因為我們要調用這一個 CSS 屬性唷! 不然寫了沒用等於沒功能。
<style>
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/*IE6、IE7 專用*/
*zoom:1;
}
.box {
width: 800px;
background-color: red;
border: 1px soild black;
margin: 0 auto;
}
.one {
height: 200px;
height: 200px;
background-color: green;
float: left;
}
.two {
height: 300px;
height: 300px;
background-color: blue;
float: left;
}
</style>
當你寫完 CSS 存檔後使用瀏覽器打開檔案，你會發現子級盒子模型會乖乖的並徘顯示乖乖的，而父級盒子模型也會顯示高度了! 這樣就能夠完成我們一直很困擾的問題啦! 這樣你又會學到一種方法啦! 但是這個方法是使用到雙偽元素的方法，至於偽元素我們還沒學到你先知道有這方法就可以了，這一個作法是在父級元素裡的內部新增 2 個透明的盒子，一個在 before ( 前 ) 一個在 after ( 後 )，就是生成隱形盒子但是是使用 CSS 去生成。
點我瞭解 小青如何每月多賺5位數台幣父級添加雙偽元素優缺點分析
- 優點 : 沒有添加塊級標籤元素，使 HTML 結構更簡潔
- 優點 : 使用方式比 after 偽元素方法簡單
- 缺點 : 無法照顧到低版本瀏覽器，或是不知名瀏覽器
CSS 清除浮動總結
這篇 CSS 教學文章很長也寫了很多篇幅，最後我們來幫 CSS 浮動做個總結吧! 為什麼需要清除浮動我想你應該知道答案了，小青我歸納出 3 個重點滿足這幾點後，你才能完整個呈現出父級盒子模型是標準流 ( 上至下 )、子級盒子模型是浮動 ( 左至右 )
- 父級盒子模型必須不設置高度
- 子級盒子模型必須設置浮動
- 由於浮動後的子級盒子模型，會飄走所以需要使用清除浮動 ( 方法有四種 )
| 清除浮動的策略方法 | 優點 | 缺點 |
| 額外標籤法(隔牆法) | 通俗易懂、撰寫方便 | 添加許多空標籤、HTML結構差 |
| 父級overflow:hidden; | 撰寫簡單代碼簡潔 | 溢出會被卡掉 |
| 父級after偽元素 | HTML 結構更簡潔 | 不太支援不知名瀏覽器 |
| 父級雙偽元素 | HTML 結構更簡潔 | 不太支援不知名瀏覽器 |
能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青