float小结

首先再明确一下浮动的定义：

浮动的框能够向左或向右移动~直到它的外边缘碰到包含框或另外一个浮动框的边框为止~因为浮动框不在文档的普通流中~因此文档的普通流中的块级元素表现的就像浮动框不存在同样

 

一、若是设置了元素float~那经过设置margin为0和auto的居中效果将失效

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

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

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

#father {
   overflow: hidden;
}

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

五、清除浮动另外一种经常使用写法以下（css）

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

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

 

六、当父元素的宽度不够容纳浮动的元素在一行显示的时候~放不下的元素会跑到下一行~这时子元素就有可能超出父元素的底边~好比在父元素高度不是很大同时没有设置overflow为hidden时~子元素就就会超出父元素显示~固然~设置了浮动的子元素不会在左右方向上超出父元素