CSS有三種基本的定位機(jī)制：普通流蓬推，浮動和絕對定位。
- 普通流
普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定呛讲，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式返奉。
- 相對定位
相對定位比較簡單圣蝎，對應(yīng)position屬性的relative值，如果對一個元素進(jìn)行相對定位衡瓶，它將出現(xiàn)在他所在的位置上徘公，然后可以通過設(shè)置垂直或水平位置，讓這個元素相對于它自己移動哮针，在使用相對定位時关面，無論元素是否移動坦袍，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)會改變等太。
-
絕對定位
相對定位可以看作特殊的普通流定位捂齐，元素位置是相對于他在普通流中位置發(fā)生變化，而絕對定位使元素的位置與文檔流無關(guān)缩抡，也不占據(jù)文檔流空間奠宜，普通流中的元素布局就像絕對定位元素不存在一樣。
絕對定位的元素的位置是相對于距離他最近的非static祖先元素位置決定的瞻想。 如果元素沒有已定位的祖先元素压真，那么他的位置就相對于初始包含塊兒（body或html神馬的）元素。
因為絕對定位與文檔流無關(guān)蘑险，所以絕對定位的元素可以覆蓋頁面上的其他元素滴肿，可以通過z-index屬性控制疊放順序，z-index越高佃迄，元素位置越靠上泼差。
- 固定定位
fixed屬性了，應(yīng)用fixed也叫固定定位呵俏，固定定位是絕對定位的中堆缘，固定定位的元素也不包含在普通文檔流中。
浮動布局
首先介紹一些浮動模型的基本知識：浮動模型也是一種可視化格式模型普碎，浮動的框可以左右移動（根據(jù)float屬性值而定）套啤，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中随常，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.
?下面看幾個例子：
不浮動
?紅塊向右移動
紅塊向左移動潜沦，綠塊被覆蓋
都向左浮動，父元素寬度為0
卡住的情況
-
行框和清理
前面指出浮動會讓元素脫離文檔流,不影響不浮動元素.實際上并不完全如此,如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現(xiàn)的像浮動元素不存在,但是框的<u>文本內(nèi)容</u>會受到浮動元素的影響,會移動以留出空間.用術(shù)語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框绪氛。
e.g
<div class="container2"> <div class="item1">item1</div> <div class="item2">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div> </div> <style> .container2 { margin-top: 30px; height: 300px; width: 300px; border: 1px solid red; } .item1 { float: left; height: 100px; width: 100px; background-color: rebeccapurple; } .item2 { height: 200px; width: 200px; background-color: gold; word-wrap: break-word; } </style>
>文本內(nèi)容會收到影響唆鸡。
> 可以看出浮動后雖然黃色div布局不受浮動影響，正常布局枣察，但是文字部分卻被擠到了紫色浮動div下邊争占。要想阻止行框圍繞在浮動元素外邊，可以使用clear屬性序目，屬性的left臂痕，right，both猿涨，none表示框的哪些邊不挨著浮動框握童。
> 在?`item2`的樣式中添加`clear:both;`就可以解決這個問題了。
