DIV+CSS區塊框浮動設計
• html教程• 發佈：2018-10-05
在頁面佈局的時候,可以用絕對定位來實現,但是由於調整某個區塊框時其他區塊的位置不會相應的改變,所以這並不是佈局的首選方式。但是使用浮動的區塊框可以向左或向右移動,直到它的外邊緣碰到包含它區塊的邊框或另一個浮動狂的邊框為止。並且由於浮動框不在文件的普通流中,所以文件的普通流中的區塊框表現的像就浮動框不存在一樣。
這篇文章就總結幾種簡單的區塊框浮動的例子:
1.不浮動區塊框排序
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ width:200px; height:200px; font-size:40px; text-align:center; } #one{ background:red; } #two{ background:green; } #three{ background:yellow; } </style> </head> <body> <div id="one"> 框(1) </div> <div id="two"> 框(2) </div> <div id="three"> 框(3) </div> </body></html>2.將第一區塊框向右浮動
重新定義#one選擇器,只需要新增一行程式碼:
#one{ float:right; background:red; }執行結果如下:
3.設定第一個向左浮動
為了能讓大家看出效果,必須要調整三個區塊的大小,所以直接重新寫程式碼了。
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ height:200px; font-size:40px; text-align:center; } #one{ width:200px; float:left; background:red; } #two{ width:240px; background:green; } #three{ width:200px; background:yellow; } </style> </head> <body> <div id="one"> 框(1) </div> <div id="two"> 框(2) </div> <div id="three"> 框(3) </div> </body></html>執行結果:
不難看出,框(2)被框(1)給覆蓋了。只有多出來的40px的寬度能看見。因為框(1)浮動之後,就不屬於文件流範圍,相當於它原先的位置空了出來,所以框(2)自然就補了上去。
4.設定三個框都向左浮動
這個只需要在例1中的div{ }中加一句程式碼:
float:left;執行效果:
5.設定三個框向左(空間不足)
只需要相應的修改三個區塊的大小即可
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ float:left; height:200px; font-size:40px; text-align:center; } #one{ width:500px; background-color:red; } #two{ width:400px; background:green; } #three{ width:600px; background:yellow; } </style> </head> <body> <div id="one"> 框(1) </div> <div id="two"> 框(2) </div> <div id="three"> 框(3) </div> </body></html>執行結果:
空間不足的話,區塊就自動下移了
6.第三個區塊被第一個“卡住”
區塊3在上面沒有足夠的空間,下移的時候,區塊1多出的部分會自動阻擋區塊3的移動。
最後再介紹一個屬性: clear (清除屬性,指定一個元素是否允許有元素漂浮在它的旁邊)
一共有這麼幾種值,分別對應不同的清除效果。靈活使用這個屬性,很多的問題都能簡單解決。