1.下圖是為設定浮動的效果
**：
學習div的浮動屬性
效果圖：
2.設定div1為左浮動.son1效果圖：
當浮動的容器沒有設定大小時，容器的大小由容器內的內容決定。
3.設定所有div的浮動屬性為左浮動，p標籤就忽略div，p的內容環繞著div
效果：
4.設定div3為右浮動
.son3效果：
當拖動螢幕時，
左右盒子的個數不一樣，所有浮動方向相同、盒子個數多的一方，排在後面的div先向下移動（換行）；
左浮動和右浮動的盒子的個數一樣時，帶html中排在**後面的盒子先換行；
5.去除其他盒子浮動對自己的影響
去除左浮動的影響：clear:left
去除右浮動的影響：clear:right
去除左右浮動的影響：clear:both
6.容器的定位position
容器的定位有四種情況：static、relative、absolute、fixed
標準定位：static
相對定位：relative
絕對定位：absolute
固定定位：fixed
當定位的盒子沒有設定大小時，盒子的大小由盒子內容的大小決定。
相對定位是盒子相對於自己本身的位置進行移動，
**：
.son1絕對定位是查詢自己的父容器，把離自己最近的設定了定位屬性的父容器作為自己定位的依據，如果所有的父容器均為設定定位屬性，則選擇瀏覽器視窗為定位依據。
容器div1設定了定位
.son1固定定位fixed屬性的參考點是瀏覽器頁面，當設定了容器的定位屬性為display:fixed;bottom:0px;後容器始終顯示在瀏覽器頁面的下端。
7.容器的display屬性，display屬性控制容器的顯示，
塊級盒子：disply:block
行內盒子：display:inline-block(或dispay:inline)
隱藏盒子：display:none
容器div、p都是塊級盒子，span為行內盒子，可以在塊級盒子中設定屬性為display：inline-block即可將塊級盒子變為行內盒子顯示在介面上。當一行不能容納下所有的行內盒子時，會自動換行進行顯示。
DIV浮動思想
html中包括兩種元素 內聯元素 行內元素 和 塊元素 怎麼理解呢？行內元素就是不換行的元素,並且大小可以自適應.例如 a img font span 塊元素就是不論內容多少 寬度高度多少都會換行顯示 例如 div p li 行內元素和塊元素的相互切換 用到 display inline block...
固定轉浮動DIV
固定轉浮動div 類似 商品頁面中，商品詳情 累計評價的 導航條，最初在頁面內固定，之後隨著滾動條滾動導航條始終浮動在頁面頂部 頂部 返回頂部 滾動條滾動條滾動條 滾動條滾動條 滾動條滾動條 滾動條滾動條 滾動條滾動條 滾動條滾動條 滾動條滾動條 滾動條滾動條 滾動條滾動條 滾動條滾動條 固定div...
div標籤消除浮動
1 第乙個div 第二個div 1 的截圖為，可以看到，id2和id3並沒有在id1中。這就是沒有清除浮動的效果。清除浮動的方法 1 對父級設定合適的高度 對父級設定合適的高度進行清除浮動，父級內內容的高度為20px 2px 22px，在id1中增加樣式height 22px 即可。效果圖 缺點 對...