Day5- CSS Layout — float

接續昨天的CSS排版，今天要記錄其他的排版方式。

介紹比較令人頭痛的float排版:

float(浮動)有以下特性:

1.脫離文檔流

2.上下分層

脫離文檔流的部分在上一篇有說明，不另外筆記。 分上下層的概念是什麼?以下圖來做說明:

三個div標籤尚未設置float屬性

設置float之後變成集中在一行

那float方式跟inline或inline-block有何不同?

如果我們只把float屬性設置在紅色的div標籤內會發生不同效果。看下圖

藍色消失了!

為何會有這樣的情況? 因為紅色div標籤被設置一個float屬性，而"浮上去"了，導致紅色的圖形與藍色和黃色在不同層級，產生覆蓋效果。

蛤?浮上去?

紅色的圖形與藍色和黃色在不同層級

由上圖可知因為float使紅色圖形脫離文檔(document)，紅色圖形可自由在瀏覽器上進行移動。

那這樣的屬性會遇到什麼問題呢? 我舉個例子:

在html內，一般外層盒子可以藉由內容物撐開，但是若遇上float這類脫離文檔流的問題時會得到下面結果:

最外層的box沒有因此被撐開! 因為紅色和藍色的圖形已經被設置float了!這樣的情形稱作高度坍塌。

那高度坍塌該如何解決?

解決方式有三種:

方式一: 在box的選擇器內 設置: overflow:hidden

方式二: 在高度坍塌內,最後添加一個元素,並設置一個名為clear的class選擇器內添加屬性clear:both 清除兩邊元素浮動

作法如下:

<補充> 若要清除一邊的浮動元素可以把both改成left或right

方式三(推薦): 直接添加名為clearfix的class選擇器在需要高度坍塌的元素(.box)內

最終結果

透過以上3種方式都可以解決高度坍塌的問題!

這樣就大致介紹完一些入門會學到的排版方式了，另外，市面上充斥不同介面大小的手機裝置，為了因應跨螢幕瀏覽，改善使用者體驗，發展出新的排版方式: FlexBox、Grid，這些會留待之後寫一篇整理。