CSS总结（二）—— 浮动 与 清除浮动

浮动float

float属性：left、right、none

浮动的工作原理：浮动框不属于文档中的普通流，当一个元素浮动后不会影响到块级框的布局而只会影响内联框的排列，当浮动的高度超出包含框时候，包含框不会自动伸高来闭合浮动元素（即：高度塌陷现象）

解决高度塌陷的问题 – 清除浮动

清除浮动目的：

      就是解决高度塌陷的问题。元素含有浮动属性，脱离了文档流，外层就不会被撑开，造成高度塌陷，margin设置值不能正常显示。

      什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷，所以并不是只要有浮动元素就会坍塌，就要清除的。

如何清除浮动：

IE下清除浮动准则很简单，使元素haslayout就可以了。如宽度值，高度值，绝对定位，zoom，浮动本身都可以让元素haslayout。显然，首选zoom:1;不会干扰任何样式。

非IE浏览器常用的有overflow属性，overflow:hidden;或是overflow:scroll都可以，不过由于后者经常一不小心出现滚动条，所以前者用的更多些。

由于现代浏览器都支持after伪元素，所以常常也会用after写入一个clear属性的元素清除浮动，这是比较好的方法。

当然，最投机取巧的方法就是直接一个<div style="clear:both;"></div>，但该方法不推荐。

下面小结这几个方法：

1. 投机取巧法

直接一个<div style="clear:both;"></div>当作最后一个子标签放到父标签那儿，此方法兼容性强，使用方便，但此方法需大量无语义的html元素，所以这个方法不推荐。

 

2. css 的 overflow 进行怪异处理

给浮动元素的容器加overflow：hidden或overflow：auto；例：
.container{overflow：hidden;}
.container{overflow:auto;}
此方法可在局部或者无法添加class的地方清理，不作为主要清理方式

3. css的:after伪元素 + zoom方法

给浮动元素的容器加class = “clearfix”,class后添加:after 来给元素末尾添加看不见的块元素以清除浮动。例：

html部分： 

<div class="container clearfix">

   <div class="floatleft"></div>

   <div class="floatright"></div>

</div>

css部分：

   .clearfix:after{margin:0;display:block;clear:both;}

   .clearfix{zoom:1;}     //触发haslayout,兼容IE6，IE7

此方法 通用性强，覆盖面广，为清除浮动推荐的最优方法。

4、给浮动元素容器添加浮动方法

 例： .container {float:left;}

在容器本就使用了浮动或绝对定位时可使用该方法

5、领接元素清理

例:

<div class="container">

     <div class="left"></div>

     <div class="right"></div>

     <div class="content"></div>

</div>

css:  .content {clear:both;}

此方法应在确保该元素跟浮动元素在同一层容器内时使用