標準文檔流

　　　　瀏覽器排版是根據元素的特征（塊和級),從上往下，從左往右排版。這就是標準文檔流。

　　　　　　float：left/right；

　　　　　　效果：元素都加浮動，後面的元素會緊跟著前面的元素並排排列。

A、 只要加了float，這個元素就會脫離標準文檔流。

　　　　（第一個加了float，離了標準文檔流，對於瀏覽器來說，第二個元素就變成了標準文檔流中的第一個，於是就會把他排在第一位。而第一個依然存在，所以就會疊加。）

行級加float，就會脫離標準流，塊不像塊，行不像行，能設置寬高，能並排排列，display就沒有任何意義了。

B、浮動的元素會緊緊貼靠在一起。

C、浮動的元素會文字環繞

　　　　使元素脫離標準流的方法：

　　　　　　　　1、浮動 （float）

　　　　　　　　2、絕對定位（position：absolute；）

　　　　　　　　3、固定定位（position：fixed；《fixed 固定的》

　　　　浮動帶來的壞處

　　　　　　　　給元素加了浮動，撐不起父級的高度了

　　　　清除浮動

　　　　　　　　1、給浮動的父元素添加高度

　　　　　　　　2、給父級添加overflow：hidden；

　　　　　　　　3、給浮動元素的後面添加一個空的div 添加樣式為clear：both；

　　　　　　　　4、給浮動元素的父級添加一個類叫clearfix

　　　　　　　　如：body裏面

<ul class="clearfix">

　　　　　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　style裏面是

　　　　　　　　　　　　　　　.clearfix:after{ content:"0";

　　　　　　　　　　　　　　　　　　　　　　display:block;

　　　　　　　　　　　　　　　　　　　　　　clear:both;

　　　　　　　　　　　　　　　　　　　　　　height:0；

　　　　　　　　　　　　　　　　　　　　　　visibility：hidden；}

偽類選擇器

偽類選擇器

　　　　　　只要選擇器後面帶：都可以說他是偽類選擇器

　　如：

　　　　　　a:link{} a:hover{} a:visited{} a:active{} p:after{} p:before{}

a的四種狀態：

　　　　a：link（正常的）

　　　　a：visited（訪問過後的）

　　　　a：hover（鼠標懸浮）

　　　　a：active（鼠標點擊的那一下）

（註：四種狀態的順序不能變）

偽元素和偽類選擇器的區別

　　偽元素有兩個冒號 如（p：：after{}）

　　偽類選擇器有一個冒號 如（p:hover{}）　　

標準文檔流以及偽類選擇器