先來說一下CSS中的浮動
一、浮動
1、標准流中的塊級盒子，寬度將自動伸展為100%，而浮動的塊級盒子，寬度不會自動伸展，而是由內容撐開
2、當一個盒子浮動，標准流中未浮動的其他盒子，將視浮動盒子不存在而占據浮動盒子原來的位置。（浮動盒子，會蓋在這個盒子的上方）
但是，未浮動盒子中的文字內容，將會受到浮動盒子寬度的影響。（未浮動盒子中的內容，不會被浮動盒子蓋住）
3、由於第二條的原因。
可以給收影響的盒子，添加clear屬性，清除掉浮動盒子對自身的影響
clear可選值：left-清除左浮動影響
right-清除右浮動影響
both-同時清除左右浮動影響，常用
4、父盒子沒有指定高度。
如果子盒子沒有浮動，則父盒子的高度可以被盒子撐開
如果，父盒子中的所有子盒子都浮動，則父盒子高度講變為0
[解決所有盒子浮動，父盒子高度塌陷的問題]
①給父盒子也添加浮動
②給父盒子添加overflow屬性；推薦使用！
③在父盒子最后，添加一個高度為0的空div。給這個div添加clear:both;屬性，清除掉浮動效果
④可以將③中的div用偽對象選擇器::after實現
#div4::after{
display:block;
concent:"";
height:0px;
clear:botn;
}
水平排放的盒子，水平間距數margin的累加
垂直排放的盒子，垂直間距是合並的去最大值
二、定位
1、相對定位relative
①使用position: relative;設置元素為相對定位元素
②使用top、right、bottom、left調整元素的位置，當left跟right同時存在時left生效top、bottom同時存在時top生效
③定位機制：
a、相對定位是相對於自己原來的位置定位。當top等屬性不指定是，元素位置不會發生不改變
b、相對定位，不會釋放掉元素在原有文檔流中的位置。不會影響其他文檔流元素的位置
④關於元素Z軸重疊
a、定位元素，默認的Z軸高於普通流文檔元素
b、同為定位元素，后來在居上
c、可以使用z-index手動調節定位元素的上下層z軸順序（不加px123什么的表示的是圖片的順序）
d、z-index默認為0，而且只能作用於定位元素
2、[絕對定位]
①使用position: absolute;設置元素為絕對定位
②定位機制：
a、相對於死一個非static定位的祖先元素進行定位（即相對於使用了relative、absolute、fixed定位的祖先元素進行定位）
b、如果所有的祖先元素都未定位，則相對於瀏覽器左上角進行定位
c、使用absolute的元素，會從文檔流中完全刪除，原有空間會被釋放
3、[固定定位 fixed]
①使用position: fixed;設置固定定位；
②固定定位：是一種特殊的絕對定位！！只是祖先元素無法使用定位鎖住
③定位機制：永遠相對於瀏覽器的左上角進行定位，而且不隨滾動條的滾動而滾動
4、[z-index 屬性]
① 作用：根據z-index屬性設置的數值，決定元素在z軸方向上的層疊次序
② 使用要求：
a、z-index只能給定位元素調整層疊次序：
relative、absolute、fixed
b、元素的z-index屬性要考慮父容器z-index的約束
>>>如果父容器設置了z-index屬性，則子容器的所有元素，講不能脫離父容器層次的約束。（即，父容器設置了z-index，則子容器只能以父容器數值為准。再給子容器設置了z-index，只能調整子容器在服容器層次之內的層疊次序）
>>>如果父容器沒有設置z-index，或者設置為z-index：auto;則子容器調整z-index將不受父容器層次約束
③ z-index:auto; & z-index:o; 之間的異同
a、 z-index:auto;是默認值，與 z-index:o;處於同一平面
b、 z-index:o;會約束子元素必須與父容器在同意平面
z-index:auto;不會約束子元素的層次
三、浮動與定位的一些小區別
float: left|right; 可以自動排列自動折行, 但需要clear來配合清除浮動;position: absolute|relative; 要配合top,left等定位。
position: absolute會導致元素脫離文檔流，被定位的元素等於在文檔中不占據任何位置，在另一個層呈現，可以設置z-index。PS的圖層效果就是position: absolute。
float也會導致元素脫離文檔流，但還在文檔或容器中占據位置，把文檔流和其它float元素向左或向右擠，並可能導致換行。圖片的文字環繞布局效果就是float。CSS允許任何元素浮動float，不論是圖像，段落還是列表。無論先前元素是什么狀態，浮動后都成為塊級元素。浮動元素的寬度缺省為auto。
浮動有一系列控制它的規則。
1.浮動元素的外邊緣不會超過其父元素的內邊緣。
2.浮動元素不會互相重疊。
3.浮動元素不會上下浮動。
4.如果一個浮動元素在另一個浮動元素之后顯示，而且會超出容納塊，則它下降到低於先前任何浮動元素的位置。說簡單點就是沒有空間的話，就另起一行。
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
CSS position 屬性
通過使用 position 屬性，我們可以選擇 3 種不同類型的定位，這會影響元素框生成的方式。
position 屬性值的含義：
relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute：元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed：元素框的表現類似於將 position 設置為 absolute，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
position，我們通常用到的是絕對(absolute)和相對(relative)定位
通常，做彈出菜單的時候，會用到定位，父元素相對定位position:relative，其中的子元素絕對定位position:absolute，通過top，right，bottom，left的值來控制子元素的位置，要注意的是子元素的位置將相對於父元素，而不是整個頁面。
浮動與定位的區別
通過定位雖然也可以進行布局，但是它的特點決定了它不適合做頁面的布局，因為被定義的元素在普通文檔中占有的任何空間都將被關閉，可以說，它是漂浮在整個頁面上面的，所以，它可以和頁面上其他的內容重疊顯示。
這個特點可以方便的讓我們做出其他特殊的效果，但是相對與浮動就布局來說，我們更多的還是用浮動。