網頁制作poluoluo文章簡介:css實例教程:理解Float的含義.
課程關鍵詞:浮動【例子】頁面效果如下:
要求:
1)兩個方塊,一個紅色#900,一個藍色#009;
2)紅色方塊寬度和高度均為200像素,藍色方塊
寬度為300像素,高度為200像素;
3)紅色方塊藍的上外邊距(margin-top)和左外邊距(margin-left)均為20像素;
大家應該注意到了,雖然紅色方塊的寬度並不是100%,但是藍色並未和紅色處於同一行,這就是塊狀元素比較“霸道”的一點,(即使塊狀元素的寬度不是100%,它也不允許其他元素和他同在一行)為了消除這種“霸權”,讓紅色和藍色方塊都處在一行,如圖
此時就需要拿出我們的利器Float!只需要在紅色方塊的CSS裡面加上“float:left;”,這時候在IE6中可以看到藍色方塊的確跑到紅色方塊的後面了,並且處於一行了,但是在FireFox中卻變成了如下效果:
這時候就需要注意了,FF中如果前面的區域浮動了,後面的那個區域很有可能就會和前面的區域發生重疊並錯位。#redBlock{現在再看看,是不是IE6和FF顯示一樣了呢~
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}