css的定位機制有3種:
普通流浮動
(float : left / right / none) 和 定位(position : static / relative / absolute)
普通流:正常的文件流
，在html
裡面的寫法就是從上到下，從左到右的排版布局...塊元素乙個接著乙個,填滿瀏覽器視窗或其他視窗元素的所有可用寬度...普通流中的物件影響它們周圍物件的布局...(文件流:是指從上到下,從左到右,乙個挨乙個的簡單的正常的布局方式)
一般在html元素分為兩種：塊級元素和行內元素。像div,p這些的元素屬於塊級元素；而span,strong等屬於行內元素。塊級元素是從上到下一行一行的排列，預設乙個塊級元素會占用一行，而跟在後面的元素會令起一行排列；行內元素是在一行中水平布置，從前到後的排列；如下面的
**：我是塊級元素，我單獨佔一行
我是塊級元素，我一行一行的排列
我的行內元素，我水平的排列
我是行內元素，沒有那麼霸道
static/relative
，這兩個依然保持正常的文件流）
,則這個div完全脫離文件流,不佔任何空間,不用擔心撐開它...
浮動(float : left / right / none/inherit):脫離文件流，不佔空間
盡可能向左或者向右移動元素,允許後面的內容環繞它
浮動元素在包含元素的內容區域,不能擴充套件到段落的填充區域浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止
所有的浮動元素都表現得像塊級元素
無論是浮動塊級元素還是內嵌元素,都遵循塊級別元素的顯示規則,四個方向的空白邊都會呈現出來...
~浮動內嵌元素
*提供浮動文字的寬度
*浮動內嵌元素表現為塊元素
~浮動塊級元素
*必須提供浮動塊元素的寬度
浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止....
由於浮動框不在文件流的普通流中,所以文件的普通流中的邊框表現的就像浮動框不存在一樣...
CSS布局文件流
文件流是文件中可顯示物件在排列時所占用的位置。css定位大致可以分成三類模型 普通流模型 浮動模型 和定位模型 普通文件流 顧名思義，普通流中的元素的位置由在html中的位置決定，根據上下級和前後的順序，乙個乙個的排列在介面上 當然根據元素的型別不一樣，排列的方式會不一樣，但先後順序，顯示層次關係不...
CSS脫離文件流
脫離文件流 也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。其他盒子與其他盒子內的文字都會無視它。float 如上圖 div2實...
CSS脫離文件流 浮動
什麼是文件流？將窗體從上至下分成一行一行，並在每行中按從左至右依次排放元素，稱為文件流，也稱為普通流。這個應該不難理解，html中全部元素都是盒模型，盒模型占用一定的空間，依次排放在html中，形成了文件流。什麼是脫離文件流？元素脫離文件流之後，將不再在文件流中佔據空間，而是處於浮動狀態 可以理解為...