float小结

1、如果设置了元素float~那通过设置margin为0和auto的居中效果将失效

2、设置元素浮动后~如果没有指定元素的宽高则元素会根据内容自动扩展~如果元素中没有文本内容或图像做填充~则宽高为0（当然给元素加边框则是另外一码事）

3、clear：both清除浮动主要用于当一个元素设置了浮动后影响到其紧邻的兄弟元素~这时我们可以为这个紧邻的元素设置清除浮动

4、子元素设置了浮动~父元素高度无法扩展导致缩成一条线时~对父元素设置清除浮动（clear：both）是不起作用的~这是我们常用的解决办法是设置父元素的overflow为hidden~假设父元素id为father~则相应css代码如下：

#father {
   overflow: hidden;
}

注意~这时建议不要给父元素手动设置高度~因为当其内容一旦超出设置的父元素的高度就看不到超出的内容啦~但是不设置父元素的高度则父元素高度就会自动根据其内容来扩展高度

5、清除浮动另一种常用写法如下（css）

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

注意~清除浮动不要滥用~.clearfix应该只用在包含浮动元素的父元素上~滥用

float小结

原文：http://www.cnblogs.com/Liujunyan/p/4957337.html