css 浮動理解Float的含義

2024-07-11 08:46:15

字體：大中小

來源：轉載

供稿：網友

面布局有兩種方式
1）浮動Float
2）定位Position

今天就來一個小小的練習，讓大家理解Float的含義

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

源代碼： 例子2.rar

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

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

這時候就需要注意了，FF中如果前面的區域浮動了，后面的那個區域很有可能就會和前面的區域發生重疊并錯位。
怎么才能解決這個問題，解決這個瀏覽器兼容的問題，很容易，只需要在藍色方塊的CSS代碼中也加入“Float:left;”，問題就解決了，加上試試，看看在FF中藍色方塊是不是和紅色方塊處于一行了~

到這里，大家應該明白Float的作用了吧，就是為了消除塊狀元素“霸權主義”的一把利器！在布局頁面的時候有時候是需要消除塊狀元素霸權主義才能布局好喲，比如KwooJan的博客中間內容部分，分為左邊(LEFT)和右邊(RIGHT)，就是要用上面這個方法布局的喲，如下圖