在實際開發過程中，我們一般使用display，float，position來構建頁面布局。
定位
靜態定位(static)
static，無特殊定位，它是html元素預設的定位方式，即我們不設定元素的position屬性時預設的position值就是static，它遵循正常的文件流物件，物件占用文件空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。
相對定位(relative)
相對定位相對的是它原本在文件流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的文件流，它沒有脫離文件流，但是它的top/left/right/bottom屬性是生效的，最重要的是它還占有文件空間，而且佔據的文件空間不會隨 top / right / left / bottom 等屬性的偏移而發生變動，也就是說它後面的元素是依據位置( top / left / right / bottom 等屬性生效之前)進行的定位，這點一定要理解。
絕對定位(absoulte)
absoulte定位，也稱為絕對定位，雖然它的名字號曰「絕對」，但是它的功能卻更接近於」相對」一詞，為什麼這麼講呢？原來，使用absoult定位的元素脫離文件流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的，舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算哦~），直到標籤為止，這裡還需要注意的是，relative和static方式在最外層時是以標籤為定位原點的，而absoulte方式在無父級是position非static定位時是以作為原點定位。和元素相差9px左右。我們來看下效果：
type="text/css">
html
body
#first
#second
style>
id="first">relativediv>
id="second">absoultdiv>
body>
html>
fixed定位，又稱為固定定位，它和absoult定位一樣，都脫離了文件流，並且能夠根據top、right、left、bottom屬性進行定位，但不同的是fixed是根據視窗為原點進行偏移定位的，也就是說它不會根據滾動條的滾動而進行偏移。
浮動
float屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。 如果浮動非替換元素，則要指定乙個明確的寬度；否則，它們會盡可能地窄。
當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。 如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。
如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
在實際開發中我們還可能遇到這樣子的情況，假如頁面中只有兩個元素div1、div2，它們都是左浮動，場景如下：
此時div1、div2都浮動，根據規則，div2會跟隨在div1後邊，但我們仍然希望div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣。
這時候就要用到清除浮動（clear），如果單純根據官方定義，讀者可能會嘗試這樣寫：在div1的css樣式中新增clear:right;，理解為不允許div1的右邊有浮動元素，由於div2是浮動元素，因此會自動下移一行來滿足規則。
對於css的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。
布局是css中的重要部分，我們常會用到水平居中，垂直居中。
水平居中
1.定寬塊狀元素：margin和width實現水平居中最常見的是給乙個元素乙個寬度，然後加上margin左右值為auto。但是必須給元素指定的一寬度。
.center
2.不定寬塊狀元素：設定子元素為display:inline,然後在父元素上設定text-align:center;
.parent
.child
class="child">我要水平居中div>
div>
3.浮動居中：position:relative 和 left:50%;
.container
.container
ul.container
li
class="container">
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
div>
body>
5.絕對定位。
6.fit-content居中：
垂直居中
1.父元素一定，子元素為單行內聯文字：設定父元素的height等於行高line-height。
.vertical
2.父元素高度確定的單行文字（內聯元素） 設定 height = line-height； 3.父元素高度確定的多行文字（內聯元素） a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle； b:先設定 display:table-cell 再設定 vertical-align:middle； 4.塊狀元素:設定子元素position:fixed（absolute），然後設定margin:auto;
.box.box
.box
.box
span
class="box">
多行文字，此處居中設定span>
div>
布局和定位
網頁的三種布局 流動模型 flow flow 預設的網頁布局模型。浮動模型 flow 可以讓塊級元素顯示在一行，用到float left right 層模型 layer 層模型有三種形式 a position absolute 這種形式將元素從文件流中拖出，然後用left,right,top,bot...
定位和布局。
一 基本概念 視覺格式化模型 css的一種機制，它規定了頁面中的多個盒子如何布局 視覺格式化模型是一套非常複雜的機制，包含錯綜複雜的css規範 本章的課程從實用的角度出發，僅學習在劃分頁面區域的時候需要的核心知識 由於劃分頁面區域時幾乎都使用的是塊盒，因此，本章仍然只涉及塊盒 視口 一種視覺化的視窗...
定位和布局
定位和布局 1 1 視覺格式化模型 1 2 視口 1 2 包含塊 2 1 定位體系概述 常規流 normal flow 浮動 float 絕對定位 absolute positioned 2 2 定位體系判定 position 絕對定位為預設值static float 浮動預設值為 none 預設情...