武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：css實(shí)例教程:理解Float的含義.

【例子】
要求：
1）兩個(gè)方塊，一個(gè)紅色#900，一個(gè)藍(lán)色#009；
2）紅色方塊寬度和高度均為200像素，藍(lán)色方塊
寬度為300像素，高度為200像素；
3）紅色方塊藍(lán)的上外邊距(margin-top)和左外邊距(margin-left)均為20像素；

大家應(yīng)該注意到了，雖然紅色方塊的寬度并不是100%，但是藍(lán)色并未和紅色處于同一行，這就是塊狀元素比較“霸道”的一點(diǎn)，（即使塊狀元素的寬度不是100%，它也不允許其他元素和他同在一行）為了消除這種“霸權(quán)”，讓紅色和藍(lán)色方塊都處在一行，如圖

 此時(shí)就需要拿出我們的利器Float！只需要在紅色方塊的CSS里面加上“float:left;”，這時(shí)候在IE6中可以看到藍(lán)色方塊的確跑到紅色方塊的后面了，并且處于一行了，但是在FireFox中卻變成了如下效果：

#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}