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应该只用在包含浮动元素的父元素上~

 

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

 

转载于:https://www.cnblogs.com/Liujunyan/p/4957337.html