清除浮動(dòng)的幾種方法：
1. clear:both/left/right
clear屬性是指元素的兩邊或某一側(cè)不能有浮動(dòng)元素，為了達(dá)到這個(gè)目的，在 CSS1 和 CSS2 中，這是通過(guò)自動(dòng)為清除元素（即設(shè)置了 clear 屬性的元素）增加上外邊距實(shí)現(xiàn)的。在 CSS2.1 中，會(huì)在元素上外邊距之上增加清除空間，而外邊距本身并不改變。最終使這個(gè)元素被擠到浮動(dòng)元素的下外邊距以下。 以這種方法為原理，通過(guò)在所有浮動(dòng)元素下方添加一個(gè)clear:both的元素，可以消除float的破壞性。更高級(jí)的方法是通過(guò)偽元素選擇器在父元素后面增加了一個(gè)clear:both的元素，也就是bootstrap采用的.clearfix.clearfixt:after{ display:block/table; clear:both; content:”“;}
2. overflow:hidden/auto
使用這種方法的原理是overflow需要父元素緊貼子元素，所以父元素需要撐大來(lái)包裹子元素，需要注意當(dāng)設(shè)置成auto時(shí)，如果父元素內(nèi)容過(guò)多，會(huì)出現(xiàn)滾動(dòng)條，而使用hidden時(shí)，不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。這個(gè)方法不適用于IE6/7，需要加上一個(gè)IE特有的屬性zoom:1
3. 給父元素設(shè)置高度（不推薦）
清除浮動(dòng)的方法基本上屬于clear和使父元素包裹兩大類，設(shè)置overflow屬性，使父元素浮動(dòng)等都屬于第二類，同理，可以設(shè)置父元素position:absolute，display:inline-block等，一些具有包裹性的CSS屬性，都具有抑制浮動(dòng)副作用的作用。
京公網(wǎng)安備 11010802030320號(hào)