使用float時出現的問題
一個非常常見的CSS問題，定位使用浮動的時候，下面的層被浮動的層所覆蓋，或者層里嵌套的子層超出了外層的范圍。
這是一個浮動在紅框的層中的一個層
style="border:1px solid green;float:left;color:green;"
這是紅框的層中的內容
解決的方法
陳舊的方法--使用clear:both
通常的解決辦法是在浮動層后面添加一個額外元素，例如一個div或者一個br，并且定義它的樣式為clear: both。
這是一個浮動在紅框的層中的一個層
style="border:1px solid green;float:left;color:green;"
這是紅框的層中的內容，紅框層后面還嵌入了一個沒有內容的層<div style="clear:both;"></div>
通常的解決辦法是在浮動層后面添加一個額外元素，例如一個div或者一個br，并且定義它的樣式為clear: both。
CSS的方法--使用：after
這種方法在在文章《How To Clear Floats Without Structural Markup》中被提到。
/*需要用到的CSS樣式表的最初設想*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*實際用到的CSS樣式表(針對不同瀏覽器做了優化)*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac "*/ *
html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
這是一個浮動在紅框的層中的一個層
style="border:1px solid green;float:left;color:green;"
這是紅框的層中的內容,對這個紅框層應用了上面提到的CSS類.clearfix
CSS的方法--使用overflow
前面的2種方法可以很好解決浮動超出的問題，但是如果當你真的需要對層或者層里的對象進行clear的時候怎么辦？一種簡單的方法就是用overflow屬性，這個方法最初的發表在《Simple Clearing of Floats》，又在《Clearance》和《 Super simple clearing floats》中被廣泛討論。
/*需要用到的CSS樣式表的最初設想(對IE不起作用)*/
.clearfix2{overflow: auto}
/*實際用到的CSS樣式表(針對不同瀏覽器做了優化)*/
.clearfix2{
_height:1%; /*height前面的下劃線是必須的*/
overflow:auto;
}
這是一個浮動在紅框的層中的一個層
style="border:1px solid green;float:left;color:green;"
這是紅框的層中的內容,對這個紅框層