一、CSS浮動

1、三個固定寬度與高度的框，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣。

2、文字圍繞圖片效果，當設置圖片左浮動時，緊鄰圖片的行內元素將依次排開，與圖片形成環(huán)繞效果。

3、浮動引發(fā)的問題

我們不定義框的寬度，然后再對1進行右浮動，我們看到內容多寬，容器就多寬，即：未定寬度的元素設定了浮動，元素的寬度會隨內容變化，我們看到對1進行浮動之后，框2就受到影響，但框3并沒有受到影響，設定了浮動的元素會對相鄰元素即緊隨其后的元素產生影響，使我們的布局變亂。

當父級元素包含的元素設置浮動時，我們發(fā)現(xiàn)父容器并沒有把浮動的子元素包圍起來，俗稱塌陷。

二、如何清除浮動

? ? ?1、利用 clear屬性，清除浮動

? ? ?2、使父容器形成BFC。

2.1 利用 clear屬性，清除浮動

clear屬性：clear 屬性規(guī)定元素的哪一側不允許其他浮動元素。

對緊鄰浮動后的元素進行清除浮動，對其后元素設置clear屬性

解決父級元素塌陷的問題：①添加空的div,設置clear屬性

clear:left屬性只是消除其左側div浮動對它自己造成的影響，而不會改變左側div甚至于父容器的表現(xiàn)，當子元素中有浮動和普通文檔流元素，設置相應普通文檔流元素clear屬性就可以清除浮動；當子元素全是浮動元素時，我們在最后添加了一個非浮動的div，由于它有clear:left屬性，所以它會按照左側div不浮動來定位自己，也就是定位到下一行，而父容器看到有一個非浮動、普通流的子元素元素，會將其包圍，這樣造成了順便也把三個浮動元素也包裹起來的效果，高度不再塌陷。

②clearfix技巧

“clearfix”技巧是基于在父元素上使用“:before”和“:after”兩個偽類。使用這些偽類，我們可以在浮動元素的父容器前面和后面創(chuàng)建隱藏元素?！?before”偽類是用來防止子元素頂部的外邊距塌陷，使用“display: table”創(chuàng)建一個匿名的“table-cell”元素。這也確保在IE6和IE7下具有一致性。“:after”偽類是用來防止子元素的底部的外邊距塌陷，以及用來清除元素的浮動。

為容器設置了一個類名“group”。在需要清除浮動的容器上添加這個類名“group”。

2.2使父容器形成BFC

BFC有三個特性

BFC會阻止垂直外邊距（margin-top、margin-bottom）疊加

BFC不會重疊浮動元素

BFC可以包含浮動

我們可以利用BFC的第三條特性來“清浮動”，這里其實說清浮動已經不再合適，應該說包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC

float為left|right

overflow為hidden|auto|scroll

display為table-cell|table-caption|inline-block

position為absolute|fixed

我們可以對父容器添加這些屬性來形成BFC達到“清浮動”效果