一.流動模型（Flow）
流動是網頁的預設布局。
特征是：
1.塊狀元素會在所處的包含元素中自上而下排列，且預設寬度為100%，也就是自占一行。
2.内聯（行内）元素會在所處的包含元素中從左到右排列，同處于一行。
二.浮動模型（Float）
當用css給元素設定float屬性時，元素便可以進行浮動。此時元素的display屬性會被隐性改變為内聯塊狀元素（inline-
block），此時元素會脫離文檔流。什麼是脫離文檔流呢？可以這樣了解，本來這個标簽是屬于文檔流管理的，那麼它應該按照
文檔流的正常布局方式從左至右從上之下，并且符合标簽本身的含義。而脫離文檔流之後，這個标簽便不再受文檔流布局的約
束，更重要的一點是這個标簽原本在文檔流中所占的空間也會被清除。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮動模型</title>
<style type="text/css">
div{
border:2px red solid;
width:100px;
height:400px;
}
#div1{
float:right;
backrgound-color:blue;
}
#div2{
background-color:red;
}
/*1.當div1設定為右浮動時，div2會填補正常文檔流中div1原本的空間，且兩個div同處于一行
2.當div1設定為左浮動時，由于1情況，div1會覆寫div2，而div2文本則會被擠至原位置
3.當div2單獨設定浮動時，此時div1仍單獨占一行，div2隻會在原來的行内進行左右浮動。
</style>
</head>
<body>
<div id="div1">欄目1</div>
<div id="div2">欄目2</div>
</body>
</html>
特殊情況：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮動模型</title>
<style type="text/css">
div{
border:2px red solid;
width:100px;
height:100px;
}
#div1{
float:left;
background-color:blue;
}
span{
/*測試 float: */
}
#div2{
background-color:red;
}
/*此時div1進行左浮動，内聯元素span與div1占同一行且會被擠至div右邊，div2向上移動填補空間（不與span一行）
總結:1.塊狀元素進行浮動時，若相鄰元素為内聯元素則會合并成一行(内聯塊狀元素特性)，在不覆寫的情況下水準布局的優先級高于内聯元素。
2.内聯元素進行浮動時，脫離文檔流清除自身空間，提高水準方向文本的優先級。
3.若浮動元素的上一個元素為塊狀元素，則不會對前面的元素造成任何影響。
</style>
</head>
<body>
<div id="div1">欄目1</div>
<span>123</span>
<div id="div2">欄目2</div>
</body>
</html>
三.層模型
層模型有三種形式：
1。絕對定位(position: absolute)
與float一樣，能将元素從文檔流中拖出來，然後可以使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父
包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于浏覽器視窗。
2。相對定位(position: relative)
它通過left、right、top、bottom屬性确定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一
個元素(并且元素像層一樣浮動了起來)，然後相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性确定，
偏移前的位置保留不動。
3。固定定位(position: fixed)
與absolute定位類型類似，但它的相對移動的坐标是視圖（螢幕内的網頁視窗）本身。由于視圖本身是固定的，它不會随浏覽器
視窗的滾動條滾動而變化，是以固定定位的元素會始終位于浏覽器視窗内視圖的某個位置，不會受文檔流動影響，這與
background-attachment:fixed;屬性功能相同。看到這是不是恍然大悟，小網站上的牛皮癬廣告原來就是用到了fixed固定定位，
難怪拖動滾動條的時候還是如影随形。
以上，ありがとうございます！
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)