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

                                                                   標準文檔流

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

　　　　　　float：left/right；

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

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

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

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

B、浮動的元素會牢牢貼靠在一塊兒。

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

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

　　　　　　　　一、浮動   （float）

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

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

　　　　浮動帶來的壞處

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

　　　　清除浮動

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

　　　　　　　　二、給父級添加overflow：hidden；

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

　　　　　　　　四、給浮動元素的父級添加一個類叫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{}）