當CSS浮動應用到某個元素後，其父元素就不能再確定它的高度了。但是想要讓父元素圍住它的浮動子元素，最簡單的解決方法是讓父元素浮動起來，或者將它的overflow屬性設定成auto，但是這種方法並非在所有情況下都適用。還有一種方法，可以應用一種名為“清除補丁”的變通程式碼。
清除補丁這一技巧的工作原理是將一個元素插入最後浮動的子元素之後，並用CSS賦予它block和clear屬性。因為這個新元素自身是不浮動的，所以它能讓父元素確定它的位置並圍住它。
將下列樣式規則新增到增強樣式表，並將class=“clearfix”應用到某個元素，強制讓它圍住所有浮動的子元素：

.clearfix
 
 : after {
    content : " ";
    display : block ;
    height : 0 ;
    clear : both ;
    visibility : hidden ;
}

這裡的：after選擇器並沒有得到Internet Explorer7和之前版本的支援，因此有必要新增另一種選擇器，確保清除補丁技巧能夠正常工作。zoom:1這個私有屬性會觸發Internet Explorer裡的hasLayout，使該元素圍住它的浮動子元素。請記住，好的做法是將IE專用的樣式存放在單獨的樣式表中，然後使用條件註釋引用該樣式表：

/*Internet Explorer專用*/
 

.clearfix {
    zoom : 1 ;
}

還有一種不那麼礙眼的替代方式可以用來在整個標記裡指派clearfix類。可以在樣式表裡列出所有需要清除補丁樣式規則的元素，從而指定該規則的作用範圍：

#header:after,
div#primary-navigation:after,
#primary-content:after,
#footer:after {
    content : " ";
    display : block ,
    height : 0 ;
    clear : both ;
    visibility：hidden ;
}
/*Internet Explorer專用*/
 

#header,
div#primary-navigation,
#primary-content,
#footer {
    zoom : 1;
}