整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
通流(normal flow)
這個單詞很多人翻譯為 文檔流 ， 字面翻譯 普通流 或者標準流都可以。
前面我們說過，網頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機制有3種：普通流（標準流）、浮動和定位。
html語言當中另外一個相當重要的概念----------標準流！或者普通流。普通流實際上就是一個網頁內標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。
浮動(float)
浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現“環繞”圖片的效果。
后來，我們發現浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了。（CSS3已經我們真正意義上的網頁布局）
什么是浮動？
元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{float:屬性值;}
浮動詳細內幕特性
浮動脫離標準流，不占位置，會影響標準流。浮動只有左右浮動。
浮動首先創建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的范圍。
浮動的元素排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
由2可以推斷出，一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。 元素添加浮動后，元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。
總結： 浮動 --->
浮動的目的就是為了讓多個塊級元素同一行上顯示。
float 浮 漏 特
浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏： 加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。
特： 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次 特別的注意浮動可以使元素顯示模式體現為行內塊特性。
閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在制作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”。
“版心”(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。
布局流程
為了提高網頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：
1、確定頁面的版心（可視區）。
2、分析頁面中的行模塊，以及每個行模塊中的列模塊。
3、制作HTML結構 。
4、CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。
一列固定寬度且居中
人生就像乘坐北京地鐵一號線：
途經國貿，羨慕繁華；
途經天安門，幻想權力；
途經金融街，夢想發財；
經過公主墳，遙想華麗家族；
經過玉泉路，依然雄心勃勃…
這時，有個聲音飄然入耳:乘客你好,八寶山馬上就要到了！
頓時醒悟：人生苦短，有始有終。
好比我們的浮動，有浮動開始，則就應該有浮動結束。
為什么要清除浮動
我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現， 但是，你不能說浮動不好
。
由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
準確地說，并不是清除浮動，而是清除浮動后造成的影響
如果浮動一開始就是一個美麗的錯誤，那么請用正確的方法挽救它。
清除浮動本質
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。
清除浮動的方法
其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在CSS中，clear屬性用于清除浮動，其基本語法格式如下：
選擇器{clear:屬性值;}
額外標簽法
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或則其他標簽br等亦可。
優點： 通俗易懂，書寫方便
缺點： 添加許多無意義的標簽，結構化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。
父級添加overflow屬性方法
可以通過觸發BFC的方式，可以實現清除浮動效果。（BFC后面講解）
可以給父級添加： overflow為 hidden|auto|scroll 都可以實現。
優點： 代碼簡潔
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
使用after偽元素清除浮動
:after 方式為空元素的升級版，好處是不用單獨加標簽了
使用方法：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
?
.clearfix {*zoom: 1;} /* IE6、7 專有 */
優點： 符合閉合浮動思想 結構語義化正確
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站： 百度、淘寶網、網易等
注意： content:"." 里面盡量跟一個小點，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。
使用before和after雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 這句話可以出發BFC BFC可以清除浮動,BFC我們后面講 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優點： 代碼更簡潔
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站： 小米、騰訊等
Web前端開發-CSS入門干貨01 、Web前端開發-CSS入門干貨02 、Web前端開發-CSS布局-盒子模型入門干貨 介紹了CSS重要基礎概念選擇器和字體系列、文本系列、背景系列樣式以及CSS布局中元素的盒子模型，下面介紹CSS布局中另外兩個重要應用浮動和定位。
根據元素浮動、定位的特性可以將CSS布局分為三種：標準流、浮動流、定位流；
其中標準流是利用塊級元素獨占一行、自上而下，行內元素一行顯示、遇到阻礙自動換行、自左向右的布局方式。
（1）什么是浮動
元素脫離原先位置，不再占據空間，相對于未浮動元素類似漂浮在其上面；
浮動元素具有了行內塊元素特性，并實現貼邊布局。這里的邊可以是父級元素的邊也可以是同樣浮動的兄弟級元素的邊。
（2）浮動解決的問題
改變塊級元素默認的垂直布局方式，改為橫向布局。
行內塊樣式（display: inline-block;）也可以改變塊級元素的布局方式，但是不能靈活解決兩個塊級元素之間縫隙、不能靈活解決多個塊級元素分別實現左對齊、右對齊等問題。當然如果想要塊級元素隨意放置，那就要用到定位了。
（3）浮動的語法
選擇器 {float:none/left/right}，對選擇器選擇的元素實現不浮動、左浮動、右浮動。
（4）浮動的典型應用
通過不浮動的塊級元素+嵌套在其內內的浮動元素，實現頁面各種布局。
塊級元素實現縱向布局，浮動的元素實現橫向布局。
（5）因為浮動引出的問題
浮動元素通常嵌套在一個不浮動的元素內，進行配合使用；所有浮動元素的高以及外邊距之和不能超過那個不浮動元素，否則出現重疊。
那么當嵌套的浮動的子元素數量不確定時，那么父級元素的高度就不能確定。為了解決這個問題，提出來不設置父級元素的高度，讓子元素的高度之和成為父元素高度的方式；然而浮動的子元素具有脫離原先位置、不占空間的特點，那么父元素的高度只會是0，在父元素之后的兄弟元素就會與上一個父元素內浮動元素發生重疊。為了解決這個問題，提出來清除浮動。
（6）清除浮動
1）語法
選擇器 {clear:right/left/both};清除選擇器選中的元素的右浮動、左浮動、左右浮動。
2）清除浮動方式
a）額外標簽法
添加一個與浮動元素同級的空標簽（塊級），并為其設置清除浮動的樣式。
<style>
.one {float:left}
.kongbq {clear:both}
</style>
<div class="box">
<div class="one"> </div>
<div class="kongbq"> </div>
</div>b）父級元素添加overflow樣式（常用）
語法：選擇器 {overflow:hidden}
c）父級元素添加after偽元素樣式（常用）
樣式如下：
.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}d）父級元素添加雙偽元素（常用）
樣式如下：
.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}（1）什么是定位
將html元素放置在任意指定的位置，提高頁面布局的靈活性。
（2）定位解決的問題
比如頁面側邊固定的工具欄、輪播圖
（3）定位的實現方式
利用定位模式+邊偏移，在樣式中設定定位模式，然后設定元素盒子模型邊偏移。
1）邊偏移
包括top、right、bottom、left四個分項。
2）定位模式分類
a）靜態定位（static）：元素無偏移，也即元素本身的默認布局方式。
語法：選擇器 {position:static;}
b）相對定位（relative）：相對元素自身原先位置設置偏移。（常用）
語法：選擇器 {position:relative;}
需要注意的是設置了相對定位的元素仍舊實際占據位置
c）絕對定位（absolute）：相對于元素的擁有定位的父級（或者更高級）元素進行定位。（常用）
語法：選擇器 {position:absolute;}
需要注意的（1）設置的絕對定位的元素的參考依據是有定位模式的父級或者更高級元素的。
（2）設置了絕對定位的元素會有浮動效果，即不再占有位置。
d）固定定位（fixed）：相對于瀏覽器可視區域，在某個位置固定不動。（常用）
語法：選擇器 {position:fixed;}
需要注意的（1）設置的固定定位的元素的參考依據瀏覽器當前可視窗口。
（2）設置了固定定位的元素會有浮動效果，即不再占有位置。
e）粘性定位（sticky）：被認為是相對定位和固定定位的混合。元素在跨越特定偏移前為相對定位，之后為固定定位。
語法：選擇器 {position:sticky; top:10px;}
需要注意的是（1）粘性定位一定要設置邊偏移（任何邊都可行），否則其功能和相對定位相同。
（2）設置的粘性定位的元素的參考依據瀏覽器當前可視窗口。
（3）設置的粘性定位的元素仍舊實際占據位置
#學問分亨官##閃光時刻二期##閃光時刻第二期主題征文#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
