第一次用 float 時，常常在排版上做的很崩潰，排不好就算了，還整個大跑版ＱＡＱ
怎麼原本的東西不見了？ 圖片為什麼整個往上跑？ 說好的並排呢？
所以這次決定用圖示的方式來搞懂 float 到底是如何讓元素跑版的！
圖示Float – 1
原圖：有一個 content ( 兒子 ) 被 wrap ( 父親 ) 包在裡面保護著
wrap 沒有特別去指定高度，只有指定空白處的 padding，wrap 主要是被裡面的 content 給撐開來的
將 content 加 上float ，看看會變得如何！
如下圖：
為什麼 wrap 會變成這樣？
可以把它想像成，只要 content 加上「float」， 就會打破原本的父子關係，content 就不再像以前一樣被包在父親的那層防護罩裡面，而是「浮」在父親的那層防護罩上面
剛剛前面有說 wrap 沒有高度，是靠 content 撐開來的，所以當 content 不在 wrap 裡面，wrap 也就沒有裡面的 content 做支撐 (只剩 padding )，也就是上圖看到這樣
那再試試看 wrap 內包兩個 content ，並且 content 有使用float的情況
圖示Float – 2
原圖：有一個 content ( 兒子 ) 和一個 content ( 女兒 ) 都被 wrap ( 父親 ) 包在裡面保護著
wrap 沒有特別去指定高度，有二個content ( 兒子和女兒 )，而各自content會預設佔滿一行， wrap 一樣是被裡面的 content 給撐開來的
將其中一個 content 加 上float
如下圖：
content 加上「float」， 就會打破原本的關係，所以 content (女兒) 沒有被包在父親的那層防護罩裡面，而是「浮」在父親的那層防護罩上面
雖然 wrap 裡面已經沒有 content (女兒) ，但是還有另一個 content (兒子) 做支撐，不怕，兒子還在！
換將兩個 content 都加上 float
如下圖：
跟上面同理
這次 wrap 裡面已經沒有任何 content 做支撐了 ( 只剩 padding )
到這邊就會大概知道只要 content 加上 float 就會使外面的 wrap 沒有支撐進而導致跑版，我們來看看如何解決吧！
如何讓 content 隨心所欲的加上 float，
但外面的 wrap 依舊有裡面的 content 做支撐？
解法：在 wrap 內的最下面，加上一個新的 content ( 我們就命名為 clearfix )，不用指定任何高度，但只要告訴他「要做清除 float 」
→ 意思是上面的 content 怎麼加 float 都無所謂， 只要有 clearfix 在最底下讓 wrap 可以做支撐就好！
PS: 若不想在 wrap 底下加新的 content ( 即 clearfix )，也可以在 wrap 上用 「::after 偽元素」去做清除浮動，可以參考這篇，這邊就不多論述如下圖：
原本兩個 content 都已經加上 float，而最底下的 clearfix 加上語法：clear: both
虛線可以把它想成就是那個新的 content ( 即 clearfix )，不過實際上是看不到它的，因為沒有幫他指定高度，這邊只是示意，因為有它在最下面清除 float，才可以讓 wrap 有支撐，也就不會導致跑版
最後，附上codepen : )
參考：
好棒棒