如何理解CSS中的浮動 ：其實他就像乘坐扶梯一樣

標籤：

只要你用過電扶梯，你就能很快的理解CSS中的浮動(Float)。   　　你肯定遇到過這樣的情況：         做好了，你想用CSS浮動來調整元素間的位置關係。   　　在寫完代碼之後，你發現浮動元素沒出現在你設想的位置，而且像個磁鐵一樣緊緊的靠在div旁邊。 　　為了理解浮動這個概念，我個人曾經花費了很長的時間。有一次，我讀到了一篇有關浮動的文章，覺得它說的很有道理，於是去嘗試文章中的方法。但是寫完代碼之後，還是失敗了……我也只好從頭再來。 　　如今我已經成功的理解了這個概念，我也想要盡我最大的努力讓其他人少走彎路。 　　浮動建立替代的流(flow)。這是浮動這個概念最難以理解的部分。在接觸到這個概念之後，在寫代碼的時候，你需要將頁面視為三個部分：左、中、右。對你來說，這是一個新的規則，以前你只需要調整元素的寬度或是定位，現在突然出現了流這個概念。 　　事實上，浮動和乘坐扶梯差不多。通過這樣的理解，下次你在使用浮動的時候，可能就不會那麼糾結了。   　　尊重通行規則 　　元素的預設流有點像中的情況。一個人站在扶梯正中間，一隻手還放在扶手上，這樣一來，他就霸佔了整個通行空間，沒人能從他身邊超越。這種乘坐扶梯的方式挺沒有公德的。 　　這個人前面的那些人，也都在這樣站著，所以他也無法超越身前的那些人 　　在網頁開發中，如果你不使用浮動，元素就像是這些不講公德的人一樣，佔據著頁面的通道。 　　而在使用了浮動之後，情況就會像是上面這張圖一樣，突然間秩序來了。 　　扶梯被分成左右兩個通道，人們都站在邊上，當有其他人需要快速通過的時候，這些人可以從左邊或是右邊繞開身前的人，實現快速通行。 　　沒有人站在中間，因此沒有人霸佔著通道。 　　在div中使用浮動的時候，網頁就是這樣。頁面中出現了左邊流和右邊流，你可以通過浮動給元素指定他們是要待在左邊還是待在右邊，而那些沒有使用浮動的元素，則待在左邊流和右邊流之間的位置。   　　浮動：左邊和右邊   　　浮動帶來的兩個新概念：左邊流和右邊流。 　　沒有使用浮動的元素，則待在文檔流(normal flow)的位置上，也就是頁面的中間部分。 　　浮動的作用，就是在各個流中建立這些新的關係。 　　如果所有人都站在扶梯的正中間，在對元素的架構進行調整時，你就會感到被處處掣肘。但是當出現了左邊和右邊的空間時，突然間你的選擇就多了。你可以讓一些人(元素)站在左邊，一些站在右邊，一些站在中間。 　　這樣一來，你就可以讓元素更加易於閱讀和理解。   　　Clear屬性   　　我們還有一個東西沒有談到：clear屬性。這個屬性允許元素宣告元素的哪一側不允許其他浮動元素。 　　在中，兩個人站在電梯的左右兩側，這種站法能讓後面的人更快的通行。 　　我們現在假設，要讓3個人站在左邊，一個人站在右邊。 　　要想讓3個元素站出現在左邊流，我們可以給它們指定“clear: left”屬性。但是如果這個三個元素是橫向並排排列的，那麼後面的元素就根本無法超越： 　　“Clear: left”的作用，是告訴每一個人都站在左邊，而且要排在第一個人的身後。 　　clear屬性最常見的用法為“clear:both”。它可以讓你重設元素的流。有點像電梯上拿著行李箱的人：雖然依舊站在一側，但是其行李箱還是堵住了中間的通道。 　　這個拿著行李箱的人重設了規則。對於後來的人來說可能是個壞訊息，但是如果你想要阻止其他元素通過的話，這個行李箱卻是一個不錯的工具。 　　但是請注意，這個行李箱和文章第一張圖的那個人不一樣。在第一張圖中，所有人都站在中間，整個扶梯上只有一個流。而這個行李箱(clear：both)雖然擋住了通道，但是整個扶梯上依然有3個流。    原文連結：https://www.sdk.cn/news/5259?utm_source=tuicool&utm_medium=referral來源Christian（編譯）

如何理解CSS中的浮動 ：其實他就像乘坐扶梯一樣