什么是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; background-color:green;}
.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 class="box1">

<div class="box1_1"><span>塊1</span></div>

<div class="box1_1"><span>塊2</span></div>

<div class="box1_1"><span>塊3</span></div>

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

代碼：
<div class="box1">

<div class="box1_1 fr"><span>塊1</span> float:right </div>

<div class="box1_1"><span>塊2</span></div>

<div class="box1_1"><span>塊3</span></div>

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

IE8和Firefox

IE6和IE7

代碼：
<div class="box1">

<div class="box1_1 fl"><span>塊1</span> float:left </div>

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

<div class="box1_1"><span>塊3</span></div>

</div>

3.浮動“塌陷”

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

代碼：
<div class="box3">

<div class="box1_1 fl"><span>塊1</span> float:left</div>

<div class="box1_1 fl"><span>塊2</span> float:left</div>

<div class="box1_1 fl"><span>塊3</span> float:left</div>

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

代碼：
<div class="box1">

<div class="box1_1 fl"><span>塊1</span> float:left </div>

<div class="box1_1 fl"><span>塊2</span> float:left</div>

<div class="box1_1 fl"><span>塊3</span> float:left</div>

<div class="clear"></div>

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

代碼：
<div class="box1 hidden">

<div class="box1_1 fl"><span>塊1</span> float:left </div>

<div class="box1_1 fl"><span>塊2</span> float:left</div>

<div class="box1_1 fl"><span>塊3</span> float:left</div>

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

代碼：
<div class="box2">

<div class="box1_1 fl"><span>塊1</span> float:left </div>

<div class="box1_1 fl"><span>塊2</span> float:left</div>

<div class="box1_1 fl"><span>塊3</span> float:left</div>

</div>

4. IE6雙邊距問題

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

IE7、IE8和Firefox

IE6

代碼：
<div class="box1 hidden">
<div class="box1_1 fl mar"><span>塊1</span> float:left marin_left:10px; </div>

<div class="box1_1 fl mar"><span>塊2</span> float:left marin_left:10px; </div>

<div class="box1_1 fl"><span>塊3</span> float:left</div>

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

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

代碼：
<div class="box1 hidden">

<div class="box1_1 fl inmar"><span>塊1</span>float:left; marin_left:10px; display:inline; </div>

<div class="box1_1 fl mar"><span>塊2</span> float:left marin_left:10px; </div>

<div class="box1_1 fl"><span>塊3</span> float:left</div>

</div>

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

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

firefox、IE7、IE8

IE6

代碼：
<div class="box1 ">

<div class="box1_2">float:left;width:200px; height:100px; background-color:green;</div>

<div class="box1_3"> margin-left:200px; width:150px; height:100px; background-color:red;</div>

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

代碼：
<div class="box1">

<div class="box1_4">margin-right:-3px; float:left;width:200px; height:100px; background-color:green;</div>

<div class="box1_3">width:150px; height:100px; background-color:red;</div>

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

firefox、IE7、IE8、IE6

代碼：
<div class="box1 hidden">

<div class="box1_4"> float:left; width:200px;height:100px; background-color:green;</div>

<div class="box1_5"> float：left;width:150px; height:100px; background-color:red;</div>

</div>

6.IE6,IE7 中，底邊距 bug

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

firefox

IE6、IE7

代碼：
<div class="box2">

<div class="box2_1"> margin-bottom:10px; float:left;</div>

<div class="box2_1"> margin-bottom:10px; float:left;</div>

<div class="box2_1"> margin-bottom:10px; float:left;</div>

<div class="box2_1"> margin-bottom:10px; float:left;</div>

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

firefox、IE7、IE8、IE6

代碼：
<div class="box2 padbot">

<div class="box2_2">float:left;</div>

<div class="box2_2">float:left;</div>

<div class="box2_2"> float:left;</div>

<div class="box2_2">float:left;</div>

</div>

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