清除浮動解決方案

兩種狀況

清除浮動包括清除子元素的浮動和清除上級元素的浮動，其中清除上級元素的浮動，只需設置clear爲both就能夠了，而清除子元素的浮動則能夠用空標籤法、clearfix方法或overflow方法。因清除上級元素的浮動比較簡單，而空標籤法清除子元素浮動會增長額外標籤，因此在這裏主要說clearfix方法、overflow方法及偶然發現的inline-block方法。

爲何要清除浮動

一個塊級元素的高度若是沒有設置height，那麼其高度就是由裏面的子元素來撐開的，若是子元素使用浮動，脫離了標準的文檔流，那麼父元素的高度會將其忽略，你能夠使用firebug查看下若是不清除浮動，父元素會出現高度不夠，那樣若是設置border或者background都得不到正確的解析

1、清除子元素浮動clearfix方法

<ul id="demo1" class="nostyle demo clearfix">
   <li><img alt="img1" src=""></li>
   <li><img alt="img2" src=""></li>
   <li><img alt="img3" src=""></li>
</ul>

/*簡潔版*/
.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    zoom:1;
}
/* 經典版 */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
注：clearfix的方法主要就是在浮動元素的父元素上加上一個clearfix class，而後這個父元素的框就會包括全部的浮動子元素。

 

2、清除子元素浮動overflow方法

/* overflow:auto */
#demo2{
    overflow:auto;*zoom:1;
}
/*或 overflow:hidden */
#demo2{
    overflow:hidden;*zoom:1;
}
注：這種方法主要是對父元素設置css，因此不須要加個class，下面的inline-block方法相同，只需設置父元素的css便可

3、清除子元素浮動inline-block方法

#demo3{
    display:inline-block;*display:inline;*zoom:1;
}