原文:
css設計指南之浮動與清除
浮動意思就是把元素從常規文件流中拿出來，浮動元素脫離了常規文件流之後，原來緊跟在其後的元素就會在空間允許的情況下，向上提公升到與浮動元素平起平坐。
一.浮動
css設計float屬性的主要目的，是為了實現文字繞排的效果。然而，這個屬性也成為了建立多欄布局最簡單的方式。
1.文字繞排
在浮動一張或其他元素時，你是在要求瀏覽器把它往上方推，直到它碰到父元素的內邊界。後面的段落不再認為浮動元素在文件流中位於它的前面了，因為它會佔據父元素左上角的位置。不過，它的內容會繞開浮動的元素。
2.建立分欄
在此基礎上設定段落也向上浮動，不過要設定段落寬度
換句話說，如果幾個相鄰的元素都具有設定的寬度，都是浮動的，而且水平空間也足以容納它們，它們就會並列排在一行。
二.圍住浮動元素的三種方法
浮動元素脫離了文件流，其父元素也看不到它了，因而也不會包圍它。從下圖可以清楚的看到，section元素沒有包圍浮動的image,這樣導致footer元素向上移動section元素的後面。
以上並非我們想要的效果，我們想要的是讓footer元素排列在image元素的下方。那有什麼方法解決此問題呢?
方法一:為父元素新增overflow:hidden
實際上，overflow:hidden宣告的真正用途是防止包含元素被超大內容撐大。應用overflow:hidden之後，包含元素依然保持其設定的寬度，而超大的子內容則會被視窗剪下掉。除此之外，overflow:hidden還有另乙個用途即迫使父元素包含其浮動的子元素。
方法二:同時浮動父元素
但有一點需要注意的是，因為浮動了section元素，所以即使section為塊元素，它也會伸縮到足以包裹其內容的大小，需要顯式設定width:100%保持與瀏覽器同寬。同時浮動了section，footer會努力向上擠到浮動元素的旁邊，需要設定footer的clear屬性，被清除的元素不會被提公升到浮動元素的旁邊。
方法三:新增非浮動的清除元素
第三種強制父元素包含其浮動子元素的方法，就是給父元素的最後新增乙個非浮動的子元素，然後清除該元素。在包含元素最後新增子元素作為清除元素的方式有兩種。
1.在html標記中新增乙個子元素，然後清除該元素。
2.應用clearfix規則
CSS之清除浮動
標籤可以是div br hr 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。優點 簡單，少，瀏覽器相容性好。缺點 需要新增大量無語義的html元素，不夠優雅，後期不容易維護。在浮動元素下加 clear，但是在ie6下，塊元素有最小高度，即當hei...
CSS之清除浮動
一 清除浮動的目的。1 當乙個父元素的高度不寫或為auto時，而且這個父元素內又有浮動的子元素，那麼這時候該父元素的高度將不會自動適應子元素的高度，也可以說高度是0px 有如下 123123 此 父元素高度不設定，而且裡面又有左浮動高度為300px的子元素。實際顯示效果為 可以看到，父div僅僅顯示...
css之清除浮動
清除浮動 在非ie瀏覽器 如firefox 下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處...