浮動與清除浮動

1、浮動（float：）

      首先再講浮動之間咱們先來弄懂什麼是標準文檔流？

      標準文檔流在HTML中是指具備必定標籤屬性，且符合html語義的html文檔，其微觀表現是：一、空白摺疊現象：好比當想讓兩個標籤緊靠是中間不可有空格。二、高矮不齊時，默認底部對齊。三、滿行會自動換行。

      其按標籤分可分爲：文本級和容器級。 按文檔流可分爲：塊級元素和行內元素。

     而後今天要講的主題中浮動即可是文檔脫離標準文檔流。

      浮動的影響有4種狀況：

      其一：使元素脫離標準文檔流。

      其二：浮動的元素相互緊貼。

      其三：浮動的元素會有「字圍」效果，例如，讓文字圍繞在圖片周圍等。

      其四：浮動的收縮性，例如，若浮動沒有設置寬高，其就會縮到內容的大小。

    另外，託標的元素不能把父元素蹭出高度。

 二 、   那麼如何清楚浮動呢？

      其也有四種方法：

      一、 給浮動的元素的祖先元素加個高度這樣就可使祖先元素裏的浮動  

      以下圖：  加高以後：

二、在下邊元素中加clear：both；

例：

三、使用「隔牆法」，（不少技術大牛喜歡用」內牆法「）

例：

內牆法，則是把class=「cl h8」這個div、放到box1的裏面的下面去，一樣能夠實現如上效果

四、使用overflow：hidden；將浮動清除

例：

本文主講的是清除浮動，而清除浮動的方法以這四種爲主，歡迎你們增長，提意見，歡迎關注！