1、浮動

　　浮動是CSS中用到的最多的一個選項，他有三個性質。關于浮動我們要強調一點，永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。

　　1.1 浮動元素脫離標準文檔流

　　　　1.1.1 大概描述：有兩個盒子，一個盒子浮動，一個盒子不浮動。浮動的盒子會脫離標準文檔流，不浮動的盒子會在標準文檔流中成為第一個，所以兩者出現覆蓋現象。

　　　　

　　　　1.1.2 大概描述：一個行內標簽在標準文檔流中是不能設置寬高的，但是使用float使其脫離文檔流之后，就可以對其設置寬高了。所有浮動的標簽不會去區分行內標簽和塊級標簽。也就是說：一旦一個元素浮動了，那么，將能夠并排了，并且能夠設置寬高了。無論它原來是個div還是個span。

　　1.2 浮動的元素互相貼靠　

　　　　以float向左浮動為例：

　　　　如果有足夠空間，那么就會靠著2哥。如果沒有足夠的空間，那么會靠著1號大哥。

　　　　如果沒有足夠的空間靠著1號大哥，自己去貼左墻。

　　　　

　　1.3 浮動元素有“自圍”的效果

　　　　自圍效果就是：浮動的盒子可以遮蓋文檔標準流的第一個盒子，但是不會遮蓋里面的文字，文字會圍繞浮動的盒子顯示。

　　　　在CSS代碼中讓div浮動，p不浮動，那么p中的文字就睡形成這種自圍效果。

<div>
    <img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

　　　　

　　　　1.4收縮現象

　　　　　　一個浮動元素如果沒有給其設置寬高，則其大小收縮為文字的寬高。

2、絕對定位 絕對定位最大的用處就是制作頁面中的壓蓋效果。

　　絕對定位使用的參考點是頁面的角。絕對定位脫離標準文檔物流即脫標。

　　position:absolute;

　　top: top: bottom: bottom:

　　left: 參考點是頁面的左上角。 right: 參考點就是頁面的右上角。left: 參考點就是頁面的左下角。right: 參考點就是頁面的右下角。

參考點選擇好之后，他是牢牢地跟著參考點走的。

這個頁面的角的理解：他會跟著卷動的不要死死地盯著瀏覽器的角。

　　絕對定位的參考點，如果用top描述，那么定位參考點就是頁面的左上角，而不是瀏覽器的左上角：

　　如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對應的頁面的左下角：

面試題題目：

因為已經發生卷動了，所以絕對定位的參考點也會發生卷動，找出參考點的位置即可。

　　子絕父相的應用：（banner圖中的幾個小圓點切換）

　　　　兒子元素使用絕對定位，父元素使用相對定位，這樣的話兒子元素的參考點將會發生改變，將不再以頁面為參考點，而是以父輩元素的盒子的角為參考點。這個父元素不一定是其直接父親，父輩元素都可以，哪個父元素使用了相對定位絕對定位的兒子元素就聽誰的，而且要聽最近的祖先元素的相對定位。

　　絕對定位的盒子居中：

　　　　position:absolute; position:absolute;

　　　　left:50%; top:50%;

　　　　margin-left:負的盒子寬度的一半 margin-top:負的盒子高度的一半

3、固定定位

　　解釋：就是相對瀏覽器定位，無論頁面怎么滾動，他都不會變化。

　　用途：①固定導航欄②返回頂部

4、父子關系：兒子就是占用父親內容的寬高，和父親的padding沒有關系。

總結

以上是生活随笔為你收集整理的CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。