“當你浮動一個元素的時候...這些浮動規則就好像在說’儘量把這個元素往上放，能放多高放多高，直到碰到某個元素的邊界為止。’”
浮動出現的意義：實現文字環繞圖片的效果，所以把浮動理解為一種裝飾。既不是結構也不是內容。
清除浮動方法小結
給父元素加overflow：hidden
這個方法最簡單，給父盒子強制包圍浮動元素，本來overflow用來防止包含元素被超大內容撐大，保持父級的寬度，超出部分被剪掉。另一個作用就是迫使父親包圍浮動元素。
overflow清除浮動的原理，在browser載入時，父盒子沒有高度，但是隻要設定了overflow，就會自動檢索所有子盒子的高度，不管是浮動的子元素還是非浮動的標準流元素，把最高的當做父元素的高度，這樣就實現了高度自適應。
讓父級也一起浮動起來
這個方法有一個注意的地方，那就是浮動起來的元素會緊緊包裹起來其子元素，不管是不是浮動的子元素，注意點是要給浮動起來的父盒子一個寬度，同時要注意這個浮動起來的父級後面的盒子會想辦法擠上來，要給後面的加一個clear來清除浮動。
新增非浮動的清除元素
有兩個位置可以加清除元素，分別叫內牆發和外牆法。
- 內牆就是在父元素的最後加一個不浮動的元素，再對這個元素進行清除，因為父級一定會包圍不浮動的元素，然後這個不浮動的還做了清除，那麼就會待在上面浮動的下面，那麼父級就會把浮動和不浮動的大家都包圍起來了。
不過這種方法引入多餘的空元素，不符合html的語義。有一個原理一樣但是更好的方法clearfix偽類法：
只給要清除的父級元素加一個類名clearfix，在css中設定這個類為：
.clearfix::after{
Content:”.”;
height：0；
display：block；
clear：both；
visilibility：hidden；
}
複製程式碼- 外牆是指在兩個浮動盒子之間加一個非浮動的元素，方法和內牆法相同。
給固定高度
這種方法給父盒子固定的高度之後，就有空間放內部浮動盒子了，浮動的就不會影響到後面的元素了，因為被父盒子管住了。但是因為不是自適應的，子盒子高度變高之後就會有超出父盒子的範圍的可能。
但也不是這種方法不夠好，在很多情況下還是要通過給固定高度來清除浮動的，比如某個帶有hover效果的導航欄，hover時出現的背景效果比原來的高度要高，此時如果對父級應用overflow來清除浮動將會切除hover時多餘的部分，所以給父級一個固定的高度是一個好選擇，這樣hover時候出現的多餘部分也不會被切切切掉了....
上面說到導航hover或者選中時的效果，常遇到的是hover或者選中狀態時，會在頂部或底部出現一條邊框如圖1、2，或更換一個更大的背景如圖3。
圖1在hover時新增一個上邊框，直接新增2px的border會導致整個高度增加，同時會出現一個晃動，這時需要利用相對定位，在hover時將自己相對於自己原來的位置給一個向上的2px的相對定位，這樣就不會出現晃動，但，整體高度還是變高了，如果想保持原高度，那麼在hover時改變a的高度即可。
有幾點要注意的：
- 盒子們都是頂端對齊，所以給盒子加高度就會出現晃動了，但是如果是像圖2一樣給下面加border，那麼導航並不會晃動，只會相應的增加一點高度，那麼在頂部增加效果的需要相對定位微調，而下面加邊框則不需要定位調整了。
- 在父級沒有設定overflow情況下，高度變了一點只要沒有明顯晃動最好不去改變高度值，但是如果父級設定了overflow，那就必須改變高度了，不然會被剪掉多餘部分，當然也可以利用這點，想讓一排導航中最後一個沒有hover效果的話，就在父級設定overflow，然後在hover時改變前面的行高，最後一個不改那麼就會讓最後一個的行高超出父級而被切掉切掉了。
圖2的效果是在hover時改變了背景圖片，而且背景圖片比原導航要高出一部分，這裡可以利用背景圖總結部分提到的padding擠出空間給背景圖方法，在hover的時候給a增加一個padding-bottom，這樣既沒有改變a的高度值，又可以給背景圖一個足夠的空間展示出來了。
當然這裡也可以採用圖1的改變高度的方法，但是有別的方法能不改高度就還是不改，因為在有些時候，hover時改變a的高度，會影響a中文字居中的問題，如果前面已經設定了行高和高度，那麼在hover時改變高度，會影響居中了，so....能不改高就還是不改了，用padding去擠一擠！
有幾點要注意的：
- 導航中的ul和li最好給固定高度，避免出現隱藏問題，而且給li固定高度，有邊框就可以設給li，這樣在a轉塊之後自動充滿了父級li，在後面改變a的padding或者高度都不會影響邊框。
- 在a轉塊了之後，最好給a也設定一個高度，就是為了固定住a，沒有別的作用。