DIV+CSS(第四天） · 走進PHP的繽紛世界

### 浮動在DIV+CSS中浮動分為左浮動，右浮動，清除浮動? ### 1、右浮動所謂的右浮動，指一個塊元素向右移動，讓出自己的空間向右移動知道碰到包含自己的父元素的最右邊的邊框。如下圖所示： ? 測試代碼如下： ?? ~~~ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 浮動案例 </title> <link rel="stylesheet" style="text/css" href="float.css"/> </head> <body> <div class="div1" id="id1">div1</div> <div class="div1">div2</div> <div class="div1">div3</div> </body> </html> ~~~ ~~~ .div1{ width:150px; height:100px; border:1px solid red; background:pink; margin-top:5px; } /*id 選擇器*/ #id1{ float:right; } ~~~ ![](https://box.kancloud.cn/2016-06-03_5750fd5030f3f.jpg) ### 2、左浮動只需要修改 CSS就可以了 ~~~ .div1{ width:150px; height:100px; border:1px solid red; background:pink; margin-top:5px; float:left; } /*id 選擇器*/ #id1{ float:right; } ~~~ 左浮動，就是指某個塊元素盡量往左邊移動，這樣就能讓出它右邊的空間，讓別的塊元素來填充！注意： 1、左浮動必須所有塊元素都保持一致，否則或出現錯誤！ 2、如果浮動元素的高度不同，那么當它向下進行換行是就會回其他元素卡住。 ### ?定位? **常用的定位有四種：** **1、 static （默認）** **2、 relative 相對定位** **所謂的性對定位是指，相對該元素應當顯示的左上角重新定位，雖然它脫離的標準流，但它的空間，不能被占用！** **![](https://box.kancloud.cn/2016-06-03_5750fd5042f48.jpg)** ** ~~~ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 定位 </title> <link rel="stylesheet" style="text/css" href="pation.css"/> </head> <body> <div class="div1"> 為什么1</div> <div class="div1"> 為什么2</div> <div class="div1"> 為什么3</div> <div class="div1"> 為什么4</div> </body> </html> ~~~ ~~~ .div1{ width:100px; height:50px; border:2px solid red; background-color:pink; float:left; } /******相對定位*********** #pace{ position:relative; left:20px; top:100px; } ****************/ ~~~ **3、 Absolute 絕對定位** **對該元素最近的那個脫離了標準六的元素定位** **如果沒有父元素，則相對body左上角定位** **代碼：** **情景1：沒有父元素** ~~~ <body> <divclass="div1"> 為什么1</div> <divclass="div1"> 為什么3</div> <divclass="div1"> 為什么4</div> <divclass="div2"></div> <divclass="div1" id="pace"> 為什么2</div> </body> ~~~ **![](https://box.kancloud.cn/2016-06-03_5750fd5054cf2.jpg)** **情景2 有父元素，父元素未脫離標準流** ~~~ <body> <divclass="div1"> 為什么1</div> <divclass="div1"> 為什么3</div> <div class="div1">為什么4</div> <divclass="div2"> <divclass="div1" id="pace"> 為什么2</div> </div> </body> ~~~ **情景1,2 顯示是一樣的，都是上圖：CSS也是一樣的如下：** ~~~ #pace{ /絕對定位，究竟對誰？對預算最近的那個脫離了標準流的元素定位/ position:absolute; left:20px;/*為正，向右移動*/ top:100px;/*為證，向下移動*/ } ~~~ ~~~ .div2{ width:100px; height:100px; border:2px solid red; background-color:pink; float:left; ~~~ **情景3 有父元素，父元素脫離標準流** **![](https://box.kancloud.cn/2016-06-03_5750fd5067a9c.jpg)** **HTML代碼和情景二一樣，CSS變動如下：** ~~~ #pace{ /絕對定位，究竟對誰？對預算最近的那個脫離了標準流的元素定位/ position:absolute; left:20px;/*為正，向右移動/ top:100px;/*為證，向下移動/ } ~~~ ~~~ .div2{ position:relative; left:20px; top:100px; width:100px; height:100px; border:2px solid red; background-color:pink; float:left; } ~~~ **2、 Fixed 固定定位** **不管怎樣總是以試穿的左上角定位** **HTML 使用情景二，CSS如下：** ~~~ #pace{ / 絕對定位，究竟對誰？對預算最近的那個脫離了標準流的元素定位/ position:fixed; left:20px;/*為正，向右移動*/ top:100px;/*為證，向下移動*/ } ~~~ ~~~ .div2{ position:relative; left:20px; top:100px; width:100px; height:100px; border:2px solid red; background-color:pink; float:left; } ~~~ **顯示效果和情景二一樣！**