點評：

CSS中很多時候會用到浮動來布局，也就是經常見到的float:left或者float:right，簡單點來說，前者是左浮動(往左側向前邊的非浮動元素飄，全是飄得元素的話，就按照流式來浮動從左到右，放不下則換行)，后者是右浮（往右飄）動。但僅僅是如此嗎？詳細出處參考：http://www.jb51.net/css/33740.html

No!?要注意以下幾點：?1、 浮動元素會被自動設置成塊級元素，相當于給元素設置了display:block（塊級元素能設置寬和高，而行內元素則不可以）。?2、 浮動元素后邊的非浮動元素顯示問題。?3、 多個浮動方向一致的元素使用流式排列，此時要注意浮動元素的高度。?4、子元素全為浮動元素的元素高度自適應問題。?
以下詳細分析四個問題。?
一、浮動元素自動變塊級元素?首先說說塊級元素和行內元素區別，簡單的來說，塊級元素獨占一行，可以設置寬高以及邊距，行內元素不會獨占一行，設置寬高行距等不會起效。常見的塊級元素有：h1~h6、p、div、ul、table，常見的行內元素有：span、a、input、select等。?
示例代碼：?

<div style="height: 200px; width: 200px;">
<span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px;
border: solid 1px red; ">浮動元素span</span>
</div>
<div style="height: 200px; width: 200px;">
<span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;
">浮動元素span</span>
</div> 浮動元素span 浮動元素span

二、浮動元素后的非浮動元素問題

浮動元素后邊的元素若是非浮動行內元素且因為定位產生重疊時，行內元素邊框、背景和內容都在該浮動元素“之上”顯示，若是非浮動塊級元素跟在浮動元素后邊且在定位后產生重疊時，該塊級元素邊框和背景在該浮動元素“之下”顯示，只有內容在浮動元素不在浮動元素“之下”顯示。?

示例代碼如下：

<div style="width: 600px; height: 500px; border: solid 1px blue; ">
<div style="float: left; width: 250px; height: 250px; border: solid 1px Aqua;
margin: 10px 0 0 10px;">
浮動DIV</div>
<div style=" border: solid 1px green; width: 300px; height: 150px;">
跟在浮動元素后邊的DIV</div>
<span style=" border: solid 1px green; margin: 0 0 0 -50px;">
跟在浮動元素后邊的span</span>
</div> 浮動DIV 跟在浮動元素后邊的DIV 跟在浮動元素后邊的span

從圖中可以看出來，跟在浮動div后邊的div背景以及邊框被壓在了底下，內容卻沒有，span整體都在浮動div之上顯示。?
不過在ie6這個效果卻很怪異，如圖：

浮動元素沒有壓在非浮動div之上，反而把span壓住了。

三、多個并列同方向浮動元素高度不一致問題?

多個同方向浮動元素若是高度不一致的話，很可能會得到意外的效果，跟你想要的布局差別很大。多個同方向浮動元素一般是按照流式布局，一行滿了則自動換行，也就是類似于以下效果：?

但各個浮動元素高度不一致的話效果很可能出現下邊的情況：?

很意外吧，主要排列到元素7的時候，一行已經顯示不下了，所以要換行，但此處換行并不是從行頭開始，而是從元素5那開始，因為元素5比元素6高很多導致。

?四、子元素全為浮動元素高度自適應問題?

由于元素浮動后脫離了文檔流，所以父元素是無法根據元素來自適應的。解決此問題最常用的辦法由兩種，第一種就是在所有浮動元素后加:?<div style="clear:both;height:0px;"></div>?第二種辦法，使用萬能clear：?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } * html .clearfix { zoom: 1; } *:first-child + html .clearfix { zoom: 1; }

然后在你需要自適應的元素上加上class=” clearfix”即可。詳細請參考：?
你真的理解clear：both嗎?

在開發中，從美工MM給你Html代碼中，肯定能經?？础?lt;div style="clear:both;"></div>”這樣的代碼，但是你真的能明白它是做什么用的嗎？?

1 2 3 4

<div?style="border:2px solid red;"> <div?style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div> <div?style="clear:both;"></div> </div>

你可以將此部分代碼放到一個HTML頁面看看效果，然后在去掉”<div style="clear:both;"></div>”看一下效果,就知道這句話的作用了。?

如圖：?（1）有clear:both的：

（2）無clear:both的

這樣看，應該就一目了然了：原來后邊的Clear:both;其實就是利用清除浮動來把外層的div撐開，所以有時候，我們在將內部div都設置成浮動之后，就會發現，外層div的背景沒有顯示，原因就是外層的div沒有撐開，太小，所以能看到的背景僅限于一條線。?
但這種辦法就是最好了的嗎？?我這么說，當然答案就不是了?？梢圆捎猛ㄟ^Hack實現：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<style> .clearfix:after{ visibility: hidden; display: block; font-size: 0; content: "."; clear: both; height: 0; } * html .clearfix{zoom: 1;} *:first-child + html .clearfix{zoom: 1;} </style> <div?class="clearfix" style="border: 2px solid red;"> <div?style="float: left; width: 80px; height: 80px; border: 1px solid blue;"> TEST DIV</div> </div>

看完解決辦法，咱們來看里邊的原理：?（1）、首先是利用:after這個偽類來兼容FF、Chrome等支持標準的瀏覽器。?:after偽類IE不支持，它用來和content屬性一起使用設置在對象后的內容，例如：?a:after{content:"(link)";}?這個CSS將會讓a標簽內的文本后邊加上link文本文字。?
（2）、利用“* html”這個只有IE6認識的選擇符，設置縮放屬性“zoom: 1;”實現兼容IE6。?（3）、利用“*:first-child + html”這個只有IE7認識的選擇符，設置縮放屬性“zoom: 1;”實現兼容IE7。?詳細出處參考：http://www.jb51.net/css/33740.html

總結

以上是生活随笔為你收集整理的html css float left与 float right的使用说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。