css 清除浮動

標籤：屬性   缺點   元素   over   line   play   str   display   clear   

功能: 實現圖文混排效果

原理: 絕對位置的元素脫離了文檔流，而浮動元素依舊在文檔流中；

 

清除浮動：(高度塌陷)

1. 額外標籤法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。）

2. 使用after虛擬元素(該方法中必須為需要清除浮動元素的偽對象中設定 height:0，否則該元素會比實際高出若干像素)

      #parent{zoom: 1}

#parent:after{

    content:".";

    height:0; //line-height: 0;

    visibility:hidden;

    display:block;

    clear:both;

}

3. overflow + zoom方法(zoom, IE專屬屬性,類似於縮放)

.fix{overflow:hidden; zoom:1;}

(有問題的，就是這個overflow:hidden;是個小炸蛋，要是裡面的元素要是想來個margin負值定位或是負的絕對位置，豈不是直接被裁掉了，所以此方法是有不小的局限性的。)

css 清除浮動