css的文件流,float浮動和position定位
因為最近不少的學弟學妹問我css佈局的問題，我就將大家的疑惑點大概總結了一下，把你們一些比較疑惑的知識給你們講一下。
1.文件流
因為定位經常就涉及到一個詞脫離文件流,可能之前不瞭解文件流，我就詳細的講解一下：
因為css的定位機制有三種，普通流，float（浮動），position(定位)
普通流:正常的文件流，在HTML裡面的寫法就是從上到下，從左到右的排版佈局。即塊元素（block）獨佔一行，內聯元素（inline）。不獨佔一行，例如:
<body>
<div id="01"></div>
<div id="02"></div 很顯然這是最普通的文件流，一個挨一個按照順序01先，02其次，03最後排列。
但是如果給某一個div進行float操作或者absolute定位，則其脫離文件流，但要注意，float和絕對定位的脫離文件流是有區別的，absolute定位是完全脫離文件流，脫離後完全不佔空間，但是float脫離文件流是不徹底的，我也看了不少部落格，上面各種說法都有，不過我還是比較贊同其中的一種說法，float雖然脫離了文件流，但是他是不徹底的脫離，他脫離了文件流還存在網頁流中，因為最早設計浮動這個機制的時候，就是為了實現文字環繞在圖片周圍的效果。所以浮動的時候，文字會環繞在浮動元素周圍。還在佔用空間。
2.float浮動
上邊已經粗略的講解了下float的原理，接下來就詳細的講講各個屬性
float有四個屬性，分別是float,right,none,Inherit。上述的移動到父元素最左和最右是指元素往左或往右移動直到碰到另一個浮動元素或父元素內容區的邊界（不包括padding）,none是預設的意思是不浮動,inherit是繼承父級元素的float值
float除了簡單的圖片周圍包圍文字，浮動可用全部的網頁佈局，但是float也會產生很多的影響
對父元素的影響 對於其父元素來說，元素浮動之後，它脫離當前正常的文件流，所以它也無法撐開其父元素，造成父元素的塌陷，效果如下圖所示
<style type="text/css">
#wrapper {
padding: 20px;
border: 1px solid red;
width: 350px;
}
.floatL {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
}
.floatR {
width: 100px;
height: 100px;
border: 1px solid #000;
float: right;
}
.blue {background: red;}
.red {background: blue;}
</style>
</head>
<body>
<div id="wrapper">
<div class="floatL blue">AAAAAAAA</div>
</div>
</body>產生的效果如圖所示
1.對兄弟元素的影響：如果兄弟元素為塊級元素，該元素會忽視浮動元素的而佔據它的位置，並且元素會處在浮動元素的下層（並且無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。
2.同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們後面，可以用這樣一個形象的比喻來描述： 在一個購票中心裡，某人從一條購票佇列跑到旁邊的一條購票佇列中排隊，那自然先跑過去的會先佔據前面的位置。但這條購票佇列還是位於當前的購票中心中 ，因此這條浮動的佇列和正常的文件流佇列也依舊在同一個父元素當中。
如下：
<div id="wrapper">
<div class="floatL red">AAAAAAAA</div>
<div class="floatL blue">BBBBBBBBBB</div>
</div>效果圖:
float對自身的影響
float物件將被視作塊物件(block-level)，即display屬性等於block。我們知道當一個元素浮動時，在沒有清除浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，並且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。
3.position定位
position定位比較容易理解，所以我也就簡單說說:
1.position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素”相對於”它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框）
所以相對定位：relative 沒有脫離正常的文件流，被設定元素相對於其原始位置而進行定位，其原始佔位資訊仍存在
2.position:absolute; 表示絕對定位，位置將依據瀏覽器左上角開始計算。 絕對定位使元素脫離文件流，因此不佔據空間。普通文件流中元素的佈局就像絕對定位的元素不存在時一樣。（因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）absolute 脫離了文件流與浮動模型，獨立於其他物件而存在，沒有佔位。
3.父容器使用相對定位，子元素使用絕對定位後，這樣子元素的位置不再相對於瀏覽器左上角，而是相對於父視窗左上角.
具體例子也就不列舉了~有疑問可以隨時諮詢