使用float時出現(xiàn)的問題

一個非常常見的CSS問題，定位使用浮動的時候，下面的層被浮動的層所覆蓋，或者層里嵌套的子層超出了外層的范圍。

解決的方法

陳舊的方法--使用clear:both

通常的解決辦法是在浮動層后面添加一個額外元素，例如一個div或者一個br，并且定義它的樣式為clear: both。

通常的解決辦法是在浮動層后面添加一個額外元素，例如一個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樣式表(針對不同瀏覽器做了優(yōu)化)*/
.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 */

CSS的方法--使用overflow

前面的2種方法可以很好解決浮動超出的問題，但是如果當你真的需要對層或者層里的對象進行clear的時候怎么辦？一種簡單的方法就是用overflow屬性，這個方法最初的發(fā)表在《Simple Clearing of Floats》，又在《Clearance》和《 Super simple clearing floats》中被廣泛討論。

/*需要用到的CSS樣式表的最初設想(對IE不起作用)*/
.clearfix2{overflow: auto}

/*實際用到的CSS樣式表(針對不同瀏覽器做了優(yōu)化)*/
.clearfix2{
_height:1%; /*height前面的下劃線是必須的*/
overflow:auto;
}