一漫贞、CSS浮動
1、三個固定寬度與高度的框育叁，當(dāng)把框 1 向右浮動時迅脐，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣豪嗽。
2谴蔑、文字圍繞圖片效果豌骏，當(dāng)設(shè)置圖片左浮動時，緊鄰圖片的行內(nèi)元素將依次排開隐锭，與圖片形成環(huán)繞效果窃躲。
3、浮動引發(fā)的問題
我們不定義框的寬度钦睡，然后再對1進(jìn)行右浮動蒂窒，我們看到內(nèi)容多寬，容器就多寬荞怒，即：未定寬度的元素設(shè)定了浮動洒琢，元素的寬度會隨內(nèi)容變化，我們看到對1進(jìn)行浮動之后褐桌，框2就受到影響纬凤，但框3并沒有受到影響，設(shè)定了浮動的元素會對相鄰元素即緊隨其后的元素產(chǎn)生影響撩嚼，使我們的布局變亂停士。
當(dāng)父級元素包含的元素設(shè)置浮動時，我們發(fā)現(xiàn)父容器并沒有把浮動的子元素包圍起來完丽，俗稱塌陷恋技。
二、如何清除浮動
? ? ?1逻族、利用 clear屬性蜻底，清除浮動
? ? ?2、使父容器形成BFC聘鳞。
2.1 利用 clear屬性薄辅，清除浮動
clear屬性：clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。
對緊鄰浮動后的元素進(jìn)行清除浮動抠璃，對其后元素設(shè)置clear屬性
解決父級元素塌陷的問題：①添加空的div,設(shè)置clear屬性
clear:left屬性只是消除其左側(cè)div浮動對它自己造成的影響站楚，而不會改變左側(cè)div甚至于父容器的表現(xiàn)，當(dāng)子元素中有浮動和普通文檔流元素搏嗡，設(shè)置相應(yīng)普通文檔流元素clear屬性就可以清除浮動窿春；當(dāng)子元素全是浮動元素時，我們在最后添加了一個非浮動的div采盒，由于它有clear:left屬性旧乞，所以它會按照左側(cè)div不浮動來定位自己，也就是定位到下一行磅氨，而父容器看到有一個非浮動尺栖、普通流的子元素元素，會將其包圍烦租，這樣造成了順便也把三個浮動元素也包裹起來的效果延赌，高度不再塌陷货徙。
②clearfix技巧
“clearfix”技巧是基于在父元素上使用“:before”和“:after”兩個偽類。使用這些偽類皮胡，我們可以在浮動元素的父容器前面和后面創(chuàng)建隱藏元素痴颊。“:before”偽類是用來防止子元素頂部的外邊距塌陷屡贺，使用“display: table”創(chuàng)建一個匿名的“table-cell”元素蠢棱。這也確保在IE6和IE7下具有一致性∷φ唬“:after”偽類是用來防止子元素的底部的外邊距塌陷泻仙，以及用來清除元素的浮動。
為容器設(shè)置了一個類名“group”量没。在需要清除浮動的容器上添加這個類名“group”玉转。
2.2使父容器形成BFC
BFC有三個特性
BFC會阻止垂直外邊距（margin-top、margin-bottom）疊加
BFC不會重疊浮動元素
BFC可以包含浮動
我們可以利用BFC的第三條特性來“清浮動”殴蹄，這里其實(shí)說清浮動已經(jīng)不再合適究抓，應(yīng)該說包含浮動。也就是說只要父容器形成BFC就可以袭灯，簡單看看如何形成BFC
float為left|right
overflow為hidden|auto|scroll
display為table-cell|table-caption|inline-block
position為absolute|fixed
我們可以對父容器添加這些屬性來形成BFC達(dá)到“清浮動”效果
