html css float left與 float right的使用說明

來源:互聯網
上載者:User

點評

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; background-color: Olive;">浮動元素span</span>
</div>
<div style="height: 200px; width: 200px;">
<span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;
background-color: Olive;">浮動元素span</span>
</div>
浮動元素span浮動元素span

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

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

範例程式碼如下:

<div style="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;"> 
<div style="float: left; width: 250px; height: 250px; border: solid 1px Aqua; background-color: gray;
margin: 10px 0 0 10px;">
浮動DIV</div>
<div style="background-color: red; border: solid 1px green; width: 300px; height: 150px;">
跟在浮動元素後邊的DIV</div>
<span style="background-color: red; 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: 

.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代碼中,肯定能經常看”<div style="clear:both;"></div>”這樣的代碼,但是你真的能明白它是做什麼用的嗎? 

<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實現:

<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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.