浮動float

文檔流

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

浮動的定義

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

float特征

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

clear清除浮動

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

clear left/right/both/none/inherit

清除浮動的方法

1.給父級加高度

問題是擴(kuò)展性不好

2.給父級加浮動

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

3.給父級設(shè)置 display：inline-block

問題是 margin左右auto失效

4.空標(biāo)簽清浮動

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

5.<br>清浮動

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

6.overflow清除浮動

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

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

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

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

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