一.主要內容

1.布局分類;131 121

2.display屬性排版

3.float屬性排版（橫向多列布局）

4.防止父類盒子塌陷

二.標準文檔流：

　　a>組成

　　　　塊級元素（block）

　　　　內聯元素（inline）

　　b>display屬性值：block、inline、inline-block、none。

　　　　值block：將元素設置為塊狀元素

　　　　值inline：將元素設置為行內元素

　　　　值inline-block：擁有兩種特性。

　　　　補充： visibility：hidden； 屬性和 display：none； 屬性相似。

　c>folat屬性值：left、right、none.

　　　　值left：左浮動

　　　　值right：右浮動

　　　　值none：不浮動

　　　d>clear屬性值：left、right、both、none。

　　　　值left：左側不允許出現float

　　　　值right：右側不允許出現float

　　　　值both：兩側不允許出現float

　　　　值none：（默認）允許出現float

　　　e>防止父類塌陷

　　　　1）浮動元素後面加空div

　　　　2）設置父元素的高度

　　　　3）父級添加overflow（溢出）屬性

　　　　　　　　值visible：默認值，內容不會被修剪，會呈現在盒子之外。

　　　　　　　　值hiddle：內容會被修剪，並且其余內容是不可見的。

　　　　　　　　值scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容。

　　　　　　　　值auto：如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。　

#father{verflow:hidden;border:1px #000 solid;}

　　　　4）父級添加偽類after　

.fathter:after{
  content:‘ ‘; /*在clear類後面添加內容為空*/
  display：block;  /*把添加的內容轉化為塊元素*/
  clear:both;   /*清除這個元素兩邊的浮動*/             
}

CSS網頁布局