在網頁中，元素有三種布局模型：
1、流動模型（flow） 預設的
2、浮動模型 (float)
3、層模型（layer）
流動（flow）模型是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型來分布網頁內容的。
流動布局模型具有2個比較典型的特徵：
1.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%（水平方向會自動填滿外部的容器）。實際上，塊狀元素都會以行的形式佔據位置。如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，實際內容區域會響應變窄。
（每乙個便簽都顯示著自己本來預設的那個寬高）
第二點，在流動模型下，行內元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）
任何元素在預設情況下是不能浮動的，但可以用 css 定義為浮動
div div
可以為不同的div設定不同的浮動方式來布局。
float的特性
float被設計出來的初衷是用於——文字環繞效果。
1.破壞性
float破壞了父標籤的原本結構，使得父標籤出現了坍塌現象。最根本原因在於：被設定了float的元素會脫離文件流。
2.包裹性
普通的div如果沒有設定寬度，它會撐滿整個螢幕，如果給div增加float:left之後，它突然變得緊湊了，寬度發生了變化。其寬度會自動調整為包裹住內容寬度，而不是撐滿整個父容器。
3.清空格
float排版出來的網頁嚴絲合縫，中間沒有空隙。
4.塊狀化
設定float屬性後，元素實際上會inline-block塊狀化
清除浮動
1.為父元素新增overflow:hidden 這樣父元素就有高度了 ，父元素的高度便不會被破壞；
2.浮動父元素
3.通過在所有浮動元素下方新增乙個clear:both的元素，可以消除float的破壞性。
4.clearfix，給父元素新增。
.clearfix::before, .clear::after
.clearfix
1、相對定位(position: relative)
1.相對於以前的位置移動，偏移前的位置保留不動。
2.在使用相對定位時，就算元素被偏移了，但是他仍然佔據著它沒偏移前的空間。
2、絕對定位(position: absolute)
1.相對於瀏覽器視窗。被設定了絕對定位的元素，在文件流中是不佔據空間的，因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素。
2.如果某元素設定了絕對定位，那麼它在文件流中的位置會被刪除；我們可以通過z-index來設定它們的堆疊順序 。3.普通文件流中元素的布局就當絕對定位的元素不存在時一樣，仍然在文件流中的其他元素將忽略該元素並填補他原先的空間。
4.浮動元素的定位還是基於正常的文件流，然後從文件流中抽出並盡可能遠的移動至左側或者右側，文字內容會圍繞在浮動元素周圍。它只是改變了文件流的顯示，而沒有脫離文件流，理解了這一點，就很容易弄明白什麼時候用定位，什麼時候用浮動了。
3、固定定位(position: fixed)
1.相對移動的座標是檢視（螢幕內的網頁視窗）本身。
2.由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響。
3.相對定位可以和絕對定位混著使用 原則是：只要父div定義了定位屬性，子div就會跟著父div的位置去再定位
4、z-index
1.利用z-index，可以改變元素相互覆蓋的順序。
2.為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。z-index值較大的元素將疊加在z-index值較小的元素之上。
2.對於未指定此屬性的定位物件，z-index 值為正數的物件會在其之上，而 z-index 值為負數的物件在其之下。
3.z-index屬性適用於定位元素（position屬性值為 relative 或 absolute 或 fixed的物件），用來確定定位元素在垂直於顯示屏方向（稱為z軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設定的z-index會是無效的。
4.如果父元素z-index有效，那麼子元素無論是否設定z-index都和父元素一致，會在父元素上方，雖然子元素設定z-index比父元素小，但是子元素仍然出現在父元素上方。
5.如果父元素z-index失效（未定位或者使用預設值），那麼定位子元素的z-index設定生效。
6.相同z-index，如果兩個元素都沒有設定z-index，使用預設值，乙個定位乙個沒有定位，那麼定位元素覆蓋未定位元素，如果兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index相同發生位置重合現象，那麼按文件流順序，後面的覆蓋前面的。
CSS 布局模型
一.流動模型 flow 1.首先它是網頁預設的布局方式，有兩個基本的特徵 i.塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100 實際上，塊狀元素都會以行的形式佔據位置。如右側 編輯器中三個塊狀元素標籤 div，h1，p 寬度顯示為100 ii.在流...
CSS布局模型
css包含3種基本的布局模型，用英文概括為 flow layer 和 float。在網頁中，元素有三種布局模型 1 流動模型 flow 2 浮動模型 float 3 層模型 layer 1.流動模型 流動 flow 是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型...
css布局模型
清楚了css 盒模型的基本概念 盒模型型別，我們就可以深入 網頁布局的基本模型了。布局模型與盒模型一樣都是 css 最基本 最核心的概念。但布局模型是建立在盒模型基礎之上，又不同於我們常說的 css 布局樣式或 css 布局模板。如果說布局模型是本，那麼 css 布局模板就是末了，是外在的表現形式。...