css浮動定位到底什麼鬼？

標籤：

實際操作浮動的時候經常出現一頭霧水的情況，趁著寫部落格理一理：

所謂浮動定位也就是定義一個元素相對於它本來的位置出現在哪裡。以下幾點是浮動定位中需要記住的：

1.浮動會先將元素在正常文檔流中刪除，但是該元素依然影響布局。例如，relative的元素原來所佔的空間還在。

2.浮動元素的外邊距始終不變。

3.元素被浮動後首先產生一個塊級框，然後為自己指定一個包含塊。

4.浮動的原則有：float之間不覆蓋；邊界來自包含塊；float之間順著排；儘可能擠一擠；儘可能頂一頂；

5.超出包含塊的方法：使用負外邊距；定義更大的寬度；

6.浮動元素與正常元素重疊時，行內框自行置頂，塊框只有內容置頂。

7.clear清楚是產生一個清除域，加在上外邊距之外，域中不允許浮動元素的存在。

8.top等的位移定義了浮動元素距離其包含塊對應邊的位移。

9.除了bottom之外，設為auto的位移項會相對於元素的靜態位置定位。

10.左右外邊距都是auto，但left、right、width不是auto。元素會保持絕對置中。

11.固定定位（fixed）與絕對位置（absloute）基本一樣，只是fixed的包含塊是視窗。

12.相對定位一個元素，它的子項目會擁有一個處於它本來所在位置的一個包含塊。

css浮動定位到底什麼鬼？