6.4日音訊,float的透徹用法。相信大家對float的用法并不陌生，因為在日常的網頁制作中，它的使用頻率可不低，如它的屬性:left、right等就是我們用的最多的，當然了，有些網站制作者也對它有很大的抱怨，如造成網頁變形，錯位不協(xié)調等時有發(fā)生，其實這并不是float的"錯"，而是我們大家在正常的學習和實踐中并沒有真正的理解它的意思有關，只要我們理解的透徹了，其實可以運用自如的。
今天就來一個小小的練習，讓大家理解Float的含義
【例子】
要求：
1）兩個方塊，一個紅色#900，一個藍色#009；
2）紅色方塊寬度和高度均為200像素，藍色方塊
寬度為300像素，高度為200像素；
3）紅色方塊藍的上外邊距(margin-top)和左外邊距(margin-left)均為20像素；
頁面效果如下：
大家應該注意到了，雖然紅色方塊的寬度并不是100%，但是藍色并未和紅色處于同一行，這就是塊狀元素比較“霸道”的一點，（即使塊狀元素的寬度不是100%，它也不允許其他元素和他同在一行）為了消除這種“霸權”，讓紅色和藍色方塊都處在一行，如圖
此時就需要拿出我們的利器Float！只需要在紅色方塊的CSS里面加上“float:left;”，這時候在IE6中可以看到藍色方塊的確跑到紅色方塊的后面了，并且處于一行了，但是在FireFox中卻變成了如下效果：
這時候就需要注意了，FF中如果前面的區(qū)域浮動了，后面的那個區(qū)域很有可能就會和前面的區(qū)域發(fā)生重疊并錯位。
怎么才能解決這個問題，解決這個瀏覽器兼容的問題，很容易，只需要在藍色方塊的CSS代碼中也加入“Float:left;”，問題就解決了，加上試試，看看在FF中藍色方塊是不是和紅色方塊處于一行了~
到這里，大家應該明白Float的作用了吧，就是為了消除塊狀元素“霸權主義”的一把利器！在布局頁面的時候有時候是需要消除塊狀元素霸權主義才能布局好喲，比如KwooJan的博客中間內容部分，分為左邊(LEFT)和右邊(RIGHT)，就是要用上面這個方法布局的喲，如下圖
細心的同學會注意到，在IE6中紅色方塊距離瀏覽器的左邊距并不是CSS代碼中定義的20像素，而是40像素，如下圖：
其實這是IE6的一個BUG，(IE6雙倍邊距BUG)，只要滿足下面3個條件才會出現這個BUG:
1）要為塊狀元素；
2）要左側浮動；
3）要有左外邊距(margin-left)；
解決這個BUG很容易，只需要在相應的塊狀元素的CSS樹形中加入“display:inline;”，代碼如下：
#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}
Css樣式實例內容，我們讓文字和圖片在一個固定寬度div層內，讓藍色背景文字內容居右，小圖片居左。
案例演示最終效果圖如下
1、首先我們設置一個最外層的寬度為300px，高度為200px的css命名為box的css選擇器代碼如下（知識點px是什么意思）
.box{width:300px;height:200px;}
2、設置box內的文字內容部分css樣式命名為yangshi，并設置背景為藍色，寬度為120px，居右浮動
.yangshi{width:120px;float:right;background:#0066FF;}
3、設置圖片居左浮動div+css樣式
img{float:left;}
4、body內的div布局，代碼如下
<divclass="box">
<divclass="yangshi">我是邯鄲網站制作網站，測試內容</div>
<imgsrc="demo.gif"/>
</div>
說明：這里img標簽是鏈接外部圖片，圖片名為demo.gif
最終演示結果截圖
CSS實驗二
接下來我們演示使用div+css讓這里小圖片居右（上個例子是居左），藍色背景文字內容區(qū)居左（上個例子是居右）(擴展css居中)。這里我們只需要改變yangshi的float:right;為float:left和圖片css樣式img{float:left;}為img{float:right;}
CSS代碼如下：
.box{width:300px;height:200px;}
.yangshi{width:120px;float:right;background:#0066FF;}
img{float:left;}
html中的css代碼和內容不變
希望通過以上兩個css實例對你認識float有幫助。希望大家多少實際操作實踐試試！也希望大家有時間看一下CSS清除浮動
css浮動總結。我們要區(qū)別與文字內容靠左(text-align:left)靠右(text-align:right)樣式，浮動只針對html標簽設置靠左靠右浮動樣式。float浮動樣式沒有靠中（浮動居中）的樣式，如果需要讓標簽對象居中我們在css布局居中相關文字給大家詳細講解介紹（cssmargin）。這里記住浮動靠右使用float:right，浮動靠左使用float:left樣式即可。
