很可惜昨天太早睡了，沒觀看團隊進度，結果缺一團隊挑戰失敗了 XD..
團隊組的部分明年再接再厲！個人賽還是要繼續還債跑下去

今天是 float 主題的第三篇
讓我們來解釋一下上次那篇引爆的地雷吧！

沒被撐開的 .box ，到底是為什麼咧？

我們都看過上一篇正常範例的 .box ，是有好好地把 img 跟 p段落給包起來的
那為什麼現在就不行了呢？
　

Ans：

因為上一篇正確範例的結尾是 p段落，而 p段落本身是有佔位的
所以 .box 就會知道說「啊，這邊有人占著，所以要給他空間！」

但是當 img 在結尾時，由於 img 本身的 float:right 屬性使其浮動
.box 自然認為這邊 沒有人占著(因為 img 還在漂浮著)，所以就不會留空間給他囉！
　
　

那到底該怎麼解決呢？

關鍵字：清除浮動

清除浮動有非常多種方法
其中最為簡單暴力好上手的就是在 HTML 當中想要清除浮動的地方加入一個 div.clearfix
如下

.clearfix{
  clear: both;
}

那我們的 HTML 就會是這樣

<div class="box">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis cupiditate natus aperiam repellendus magnam pariatur hic illum rem accusantium! Necessitatibus!</div>
  <img src="依然懶得想路徑" alt="包子">
  <div class="clearfix"></div>
</div>

如此一來我們就可以得到這樣的畫面效果！

demo

我好像一直強迫大家看猩猩呀...下次我會盡量找可愛一點的　

　
　
上面說到這只是其中一種最簡單暴力的
那另外一種實務上比較常見、稍微進階一些的方法便是使用偽元素來清除浮動
不過考慮到介紹偽元素的篇幅可能會稍微長一些
就容許我留到下一篇再來介紹稍微詳細一些吧！

>>隊友任意門<<

• Jason 勇者Jason和前端之鑰
• Clover 用Vue與firebase開發訂便當系統實錄
• aflect 我的UI/UX奮鬥屎
• GG 一隻巨大的UI/UX菜鳥
• Jimmy ES666
• R-yin 菜鳥前端奮鬥史(欸?

我是小菜鳥阿陰，我們下次見！