css樣式float形成的浮動「塌陷」問題的解決辦法

什麼是CSS Float？

定義: float 屬性定義元素浮動到左側或右側。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級元素，而不論它自己是何種元素。元素對象設置了float屬性以後，它將再也不獨自佔據一行。浮動塊能夠向左或向右移動，直到它的外邊緣碰到包含它的框或另外一個浮動塊的邊框爲止。
fload屬性有四個可用的值：Left 和Right 分別浮動元素到各自的方向，None (默認的) 使元素不浮動，Inherit 將會從父級元素獲取float值。
下面讓咱們來詳細瞭解下css float

1.Float的用處

除了簡單的在圖片周圍包圍文字，浮動可用於建立所有網頁佈局。

浮動對小型的佈局一樣有用。例如頁面中的這個小區域。若是咱們在咱們的小頭像圖片上使用浮動，當調整圖片大小的時候，盒子裏面的文字也將自動調整位置：

一樣的佈局能夠經過在外容器使用相對定位，而後在頭像上使用絕對定位來實現。這種方式中，文本不會受頭像圖片大小的影響，不會隨頭像圖片的大小而有相應變化。

程序代碼
須要用到的CSS樣式
body{ margin:0px; padding:0px; text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px;}
div,p,ul,li,h2,h3,h4,h5{ padding:0px; margin:0px;line-height:22px;}
h1{ font-size:14px;}
body >div{ text-align:left; margin:10px auto;}
#box{ width:900px; text-align:left;}
.box1{ width:370px;border:1px solid #f00;}
.box3{border:1px solid #f00;}
.box2{ width:370px;border:1px solid #f00;}
.box2:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.box1_1{ width:100px; height:70px;border:1px solid #6CF;}
.clear{ clear:both; height:0px; width:0px; font-size:0px; line-height:100%; }
.fl{ float:left;}
.fr{ float:right;}
.hidden{overflow:hidden;}
span{ color:#f00; font-weight:bold;}
.mar{ margin-left:20px;}
.inmar{ display:inline; margin-left:20px;}
.box1_2{ width:200px; float:left; height:100px; }
.box1_3{ width:150px; height:100px; margin-left:200px; background-color:red;}
.box1_4{ width:200px; float:left; height:100px; background-color:green;margin-right:-3px;}
.box1_5{ width:150px; float:left; height:100px; background-color:red;}
.box2_1{  margin-bottom:10px;float:left;width:80px; height:70px;border:1px solid #f00;}
.box2_2{ float:left;width:80px; height:70px;border:1px solid #f00;}
.padbot{ padding-bottom:10px;}

2．float浮動元素不佔據正常文檔流空間

因爲浮動塊不在文檔的普通流中，因此文檔的普通流中的塊表現得就像浮動塊不存在同樣。
·如下是3塊div均未加float時在瀏覽器內顯示以下圖

代碼：

<div>

<div><span>塊1</span></div>

<div><span>塊2</span></div>

<div><span>塊3</span></div>

</div>
·塊1向右浮動，脫離文檔流而且向右移動，直到它的右邊緣碰到包含塊的右邊緣。以下圖

代碼：
<div>

<div><span>塊1</span> float:right </div>

<div><span>塊2</span></div>

<div><span>塊3</span></div>

</div>
·塊1向左浮動，脫離文檔流而且向左移動，直到它的左邊緣碰到包含塊的左邊緣;IE8和Firefox中由於它再也不處於文檔流中，因此它不佔據空間，實際上覆蓋住了塊 2，使塊2從視圖中消失。而塊2的內容卻顯示在塊1未浮動時塊2所處的位置。而IE6和IE7中緊跟在浮動元素塊1的塊2也會跟着浮動。以下圖

 IE8和Firefox

 IE6和IE7

代碼：
<div>

<div><span>塊1</span> float:left </div>

<div style="background:#FCC;">background:#FCC<span>塊2</span></div>

<div><span>塊3</span></div>

</div>

3.浮動「塌陷」

·使用浮動(float)的一個比較疑惑的事情是他們怎麼影響包含他們的父元素的。若是父元素只包含浮動元素，且父元素未設置高度和寬度的時候。那麼它的高度就會塌縮爲零。若是父元素不包含任何的可見背景，這個問題會很難被注意到，可是這是一個很重要的問題。在這裏咱們能夠稱爲「塌陷」。以下圖

代碼：
<div>

<div><span>塊1</span> float:left</div>

<div><span>塊2</span> float:left</div>

<div><span>塊3</span> float:left</div>

</div>
解決「塌陷」問題有如下三個方法
1.在使用float元素的父元素結束前加一個高爲0寬爲0且有clear:both樣式的div 以下圖

代碼：
<div>

<div><span>塊1</span> float:left </div>

<div><span>塊2</span> float:left</div>

<div><span>塊3</span> float:left</div>

<div></div>

</div>
2.在使用float元素的父元素添加overflow:hidden;以下圖

代碼：
<div>

<div><span>塊1</span> float:left </div>

<div><span>塊2</span> float:left</div>

<div><span>塊3</span> float:left</div>

</div>
3 .使用after僞對象清除浮動 以下圖

代碼：
<div>

<div><span>塊1</span> float:left </div>

<div><span>塊2</span> float:left</div>

<div><span>塊3</span> float:left</div>

</div>

4. IE6雙邊距問題

·IE6雙邊距問題：一個居左浮動(float:left)的元素放置進一個容器盒(box)，並在浮動元素上使用了左邊界(margin-left) 在ie6內便產生雙倍邊距。以下圖

IE七、IE8和Firefox

 IE6

代碼：
<div>
<div><span>塊1</span> float:left marin_left:10px; </div>

<div><span>塊2</span> float:left marin_left:10px; </div>

<div><span>塊3</span> float:left</div>

</div>
這個Bug僅當浮動邊界和浮動元素的方向相同時出如今浮動元素和容器盒的內邊緣之間，在這以後的任意有着類似邊界的浮動元素不會呈現雙倍邊界。只有特定的浮動行的第一個浮動元素會遭遇這個Bug。像居左的狀況同樣，雙倍邊界一樣神祕地顯示在居右的相同方式。

解決IE6雙邊距問題: display:inline; 使浮動忽略 以下圖

代碼：
<div>

<div><span>塊1</span>float:left; marin_left:10px; display:inline; </div>

<div><span>塊2</span> float:left marin_left:10px; </div>

<div><span>塊3</span> float:left</div>

</div>

5.IE6文本產生3象素的bug

·浮動IE6文本產生3象素的bug時指挨着浮動元素的文本會神奇的被踢出去3像素，好像浮動元素的周圍有一個奇怪的力場同樣。以下圖

 firefox、IE七、IE8

 IE6

代碼：
<div>

<div>float:left;width:200px; height:100px; </div>

<div> margin-left:200px; width:150px; height:100px; </div>

</div>
解決浮動IE文本產生3象素問題如下有兩個方法
1.左邊對象浮動，右邊採用外補丁的左邊距來定位  以下圖
 firefox、IE七、IE八、IE6

代碼：
<div>

<div>margin-right:-3px; float:left;width:200px; height:100px; </div>

<div>width:150px; height:100px; </div>

</div>
2.左邊對象浮動，右邊對象也浮動 以下圖

 firefox、IE七、IE八、IE6

代碼：
<div>

<div> float:left; width:200px;height:100px; </div>

<div> float：left;width:150px; height:100px; </div>

</div>

6.IE6,IE7 中，底邊距 bug

·IE6,IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉。以下圖

 firefox

 IE六、IE7

代碼：
<div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

</div>
解決IE6,IE7 中，底邊距 bug：用父元素的底內補白(padding)代替。以下圖

 firefox、IE七、IE八、IE6

代碼：
<div>

<div>float:left;</div>

<div>float:left;</div>

<div> float:left;</div>

<div>float:left;</div>

</div>

這個方法的缺點是不能換行，若是想要換行的話，建議將浮動父元素的浮動子元素設置padding值。