float小結

首先再明確一下浮動的定義：

浮動的框能夠向左或向右移動~直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止~因爲浮動框不在文檔的普通流中~因此文檔的普通流中的塊級元素表現的就像浮動框不存在同樣

 

一、若是設置了元素float~那經過設置margin爲0和auto的居中效果將失效

二、設置元素浮動後~若是沒有指定元素的寬高則元素會根據內容自動擴展~若是元素中沒有文本內容或圖像作填充~則寬高爲0（固然給元素加邊框則是另一碼事）

三、clear：both清除浮動主要用於當一個元素設置了浮動後影響到其緊鄰的兄弟元素~這時咱們能夠爲這個緊鄰的元素設置清除浮動

四、子元素設置了浮動~父元素高度沒法擴展致使縮成一條線時~對父元素設置清除浮動（clear：both）是不起做用的~這是咱們經常使用的解決辦法是設置父元素的overflow爲hidden~假設父元素id爲father~則相應css代碼以下：

#father {
   overflow: hidden;
}

注意~這時建議不要給父元素手動設置高度~由於當其內容一旦超出設置的父元素的高度就看不到超出的內容啦~可是不設置父元素的高度則父元素高度就會自動根據其內容來擴展高度

五、清除浮動另外一種經常使用寫法以下（css）

    <style>
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>

注意~清除浮動不要濫用~.clearfix應該只用在包含浮動元素的父元素上~

 

六、當父元素的寬度不夠容納浮動的元素在一行顯示的時候~放不下的元素會跑到下一行~這時子元素就有可能超出父元素的底邊~好比在父元素高度不是很大同時沒有設置overflow爲hidden時~子元素就就會超出父元素顯示~固然~設置了浮動的子元素不會在左右方向上超出父元素