浮動與清除浮動，浮動清除浮動

浮動與清除浮動，浮動清除浮動

一、浮動（float：）

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

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

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

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

      浮動的影響有4種情況：

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

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

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

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

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

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

      其也有四種方法：

      1、 給浮動的元素的祖先元素加個高度這樣就可以使祖先元素裡的浮動  

      如：  加高之後：

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

例：

3、使用“隔牆法”，（很多技術大牛喜歡用”內牆法“）

例：

內牆法，則是把class=“cl h8”這個div、放到box1的裡面的下面去，同樣可以實現如上效果

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

例：

本文主講的是清除浮動，而清除浮動的方法以這四種為主，歡迎大家增加，提意見，歡迎關注！