文件流指的是文件中的標籤在排列時所占用的位置。 將窗體自上而下分成一行行 ，並在每行中按從左至右的順序排放標籤，即為文件流。
也就是說在文件流中標籤缺省會緊貼到上乙個標籤的右邊，如果右邊不足以放下標籤，標籤則會另起一行，在新的一行中繼 續從左至右擺放。
使標籤脫離原來的文件流，在父標籤中浮動起來。
浮動使用float屬性。
可選值：
none ：不浮動
left ：向左浮動
right ：向右浮動
塊級標籤和行級標籤都可以浮動；
行級標籤浮動以後將會自動變為塊級標籤。
當乙個塊級標籤浮動以後，寬度會預設是內容的寬度；
浮動會使標籤完全脫離文件流，也就是不再在文件中在占用位置標籤浮動以後即完全脫離文件流，這時不會再去影響父標籤的高度；也就是浮動標籤不會撐開父標籤。
當乙個標籤浮動以後，其下方的標籤會上移；標籤中的內容將會圍繞在標籤的周圍；
這時出現的問題需要使用清除浮動來處理；
clear屬性可以用於清除標籤周圍的浮動對標籤的影響,其他標籤的位置不發生變化。
left ： 忽略左側浮動
right ：忽略右側浮動
both ：忽略全部浮動
例如：
doctype
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
*.nva-box #nva
.nva-box
.nva-box #nva:hover
style
>
head
>
>
class
="nva-box"
>
"nva"
>
首頁div
>
"nva"
>
開啟方式div
>
"nva"
>
今日要聞div
>
"nva"
>
熱門div
>
"nva"
>
>
"nva"
>
購物div
>
"nva"
>
法律資訊div
>
"nva"
>
訪談錄div
>
style="
clear
: left;
">
div>
div>
body
>
html
>
在網頁製作過程中，大區域的部分可以通過浮動來調整布局，但是小區域內的布局就需要精準定位來實現。
定位:必須找準乙個參照物。
相對定位:position: relative;
開啟了相對定位,沒有設定偏移量,標籤位置不動；
left top right bootom設定偏移量；
相對定位是以其原來的位置為參照物移動；
移動後其原來位置還被占用(沒有脫離文件流)；
與其他標籤位置重疊時會提公升乙個層級；
相對定位不會改變標籤的性質。
絕對定位：position: absolute;
絕對定位是不佔空間的。
開啟了絕對定位的標籤 就會脫離原來的文件流。
沒有設定偏移量 位置不變，
left top right bootom設定偏移量，
絕對定位是以離他最近的開啟了定位的祖先標籤進行定位,
這兩個條件有乙個不滿足,就會以瀏覽器的視窗為參照物定位。
絕對定位會改變標籤的性質，行級標籤變成塊標籤；
絕對定位會使標籤提公升乙個層級。
一般設定是要給父級標籤開啟相對定位，子級開啟絕對定位。
doctype
html
>
>
>
charset
="utf-8"
>
>
title
>
type
="text/css"
>
img.md_box
.md_box .btn_left,.md_box .btn_right
.btn_right
style
>
head
>
>
class
="md_box"
>
src=
"img/photo.png"
/>
class
="btn_left"
>
<
div>
class
="btn_right"
>
">>
div>
div>
body
>
html
>
CSS脫離文件流 浮動
什麼是文件流？將窗體從上至下分成一行一行，並在每行中按從左至右依次排放元素，稱為文件流，也稱為普通流。這個應該不難理解，html中全部元素都是盒模型，盒模型占用一定的空間，依次排放在html中，形成了文件流。什麼是脫離文件流？元素脫離文件流之後，將不再在文件流中佔據空間，而是處於浮動狀態 可以理解為...
CSS盒模型 定位流 浮動流
一 盒模型 1 border 寬度 樣式顏色 2 padding 內邊距 3 margin 外邊距 垂直方向會合併 4 content 其它操作 1 box sizing content box 預設 border box 固定元素大小 2 水平居中 1.margin 0 atuo 盒子居中 2.t...
css的定位與文件流
css的定位機制有3種 color blue 普通流 浮動 float left right none 和定位 position static relative absolute color 普通流中的元素的位置由元素在 x html 中的位置決定。浮動元素不佔任何正常文件流空間，而浮動元素的定位還...