乙個元素浮動或絕對定位後，它將自動轉換為塊級元素，而不論該元素本身是什麼型別。想要解釋浮動和絕對定位的區別，就要先引入文件流和文字流的概念：
概括地說其實就是一系列字元，是文件的讀取和輸出順序，也就是我們通常看到的由左到右、由上而下的讀取和輸出形式，在網頁中每個元素都是按照這個順序進行排序和顯示的，而position屬性可以將元素從文字流脫離出來顯示。
英文原版文件為"normal flow"，翻譯成常規流、普通流也就更好理解它了。從直觀上理解，常規流指的是元素按照其在 html 中的位置順序決定排布的過程,主要的形式是自上而下（塊級元素）,一行接一行,每一行從左至右（行內元素）。常規流又包含三種型別:塊級元素的塊級格式、行內元素的行內格式以及兩種元素的相對定位方式。
浮動和定位（脫標）都可以使元素脫離文件流。下面是在常規流中的**及效果（只展示body中的內容）：
html部分：
this is outofnormal content area.css部分：this is normal content area.this is normal content area.this is normal content area.this is normal content area.
.outofnormal效果圖：
利用float脫離文件流的時候，其他盒子元素會無視這個元素，但是其他盒子內的文字依然會為它讓出位子，環繞在其周圍，也就是說不脫離文字流。
css部分給元素新增浮動：
.outofnormal效果圖：
說明：可以發現，div脫離了文件流，h2元素和p元素都定位不到div，所以頂了上來。但是其中的文字卻還是定位在div的右邊，說明此時脫離了文件流，並沒有脫離文字流。
但是值得注意的是，如果乙個浮動元素的上乙個元素也是浮動的，那麼它會跟在上乙個元素的後面。
利定位t脫離文件流的時候，其他盒子元素和文字內容都會無視這個元素
html部分將浮動改為絕對定位：
.outofnormal效果圖：
說明：可以發現此時的文字也頂到最左側，忽略了div，脫離了文件流同時也脫離了文字流。
定位和浮動
能把元素定在螢幕的任意位置，該元素脫離文件流。什麼是文件流 文件流指的是元素排版布局過程中，元素會自動從左往右，自上而下的流式布局。一 relative 相對定位 相對定位的元素相對於自身偏移 相對定位的元素不會脫離文件流 二 absolute 絕對定位 使元素完全脫離文件流 相對於 static ...
浮動和定位
浮動 float float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定乙個明確的寬度 否則，它們會盡可能地窄。注釋 假如在一行之上只有極少的空間可...
浮動和定位
float屬性 高度塌陷 清除浮動 清除浮動不是不讓元素浮動，而是清除浮動對父級帶來的影響 清除浮動的方法 給浮動元素的父級設定高度height 不推薦使用 缺點 很多情況下 高度都是不確定的 所有不適用 以浮制浮，給浮動元素的父元素設定浮動，原理是開啟bfc 不推薦使用 缺點 只有在父級需要浮動的...