浮動float

文檔流

文檔中可顯示對象在排列時所占用的位置

浮動的定義

使元素脫離文檔流，按照指定的方向發(fā)生移動，遇到父級邊界或者相鄰的浮動元素停下來

float特征

• 塊級元素在一排顯示
• 內聯(lián)元素支持寬高
• 默認內容撐開寬度
• 脫離文檔流
• 提升半個層級

clear清除浮動

元素的某個方向上不能有浮動元素

clear left/right/both/none/inherit

清除浮動的方法

1.給父級加高度

問題是擴展性不好

2.給父級加浮動

問題是頁面中所有元素可能都要加浮動，margin左右自動失效

3.給父級設置 display：inline-block

問題是 margin左右auto失效

4.空標簽清浮動

在浮動元素旁邊新建空標簽并給其添加樣式clear：both；達到給浮動元素清除浮動的效果。
問題是IE6最小高度19px;解決后還有2px的偏差，而且設置空標簽不符合標準，不建議使用

5.<br>清浮動

在浮動元素下面加<br clear="all"/>
問題是不符合工作中結構、樣式、行為三者分離的要求

6.overflow清除浮動

給浮動元素的父級添加overflow：hidden；

overflow:hidden;溢出隱藏
overflow:scroll;以滾動條形式出現(xiàn)

7.建議使用：after偽類清除浮動

偽類：元素內部末尾添加的內容。
設置zoom,并將after內的content設為空。
偽類清除浮動，例如:

            .clearfix{ *zoom:1; }
              
            .clearfix:after{   
            content:"";    
            display:block;   
            clear:both;    
            }