CSS之清除浮动

一、清除浮动的目的。

　　1、当一个父元素的高度不写或为auto时，而且这个父元素内又有浮动的子元素，那么这时候该父元素的高度将不会自动适应子元素的高度，也可以说高度是0px;

　　有如下代码：

<div class="divp" style="width:300px; background:red; border:3px solid #000000;">
<div style="height:300px;float:left; background-color:Green">123123</div>
</div>

　　此代码父元素高度不设置，而且里面又有左浮动高度为300px的子元素。实际显示效果为：

　　　　


　　　　可以看到，父div仅仅显示为其边框的高度，并没有适应其子元素的高度，要正确显示父元素的边框的话，此时就要清除浮动。我们在原来的代码的基础上加多一个<br/>以用于清除浮动，实际代码如下：

<div class="divp" style="width:300px; background:red; border:3px solid #000000;">
<div style="height:300px;float:left; background-color:Green">123123</div>
<br/ style="clear:both;" >　　//此行代码用于清除浮动
</div>

　　　　现在再来看看现在的效果：

　　　　


　　　　注意：清除浮动的元素要放在正确的位置上，必须紧贴着浮动元素。

　　2、布局错位问题。

　　　　因为浮动元素脱离了标准文档流，因此其它非浮动元素可能会受此影响而错位。

　　　　例如有如下代码：

<div style="border:2px solid #000; width:320px;">
<div style="width:100px;height:100px;float:left; border:1px solod #555">左浮动元素</div>
<div style="width:100px;height:100px;float:right; border:1px solod #AAA">右浮动元素</div>
</div>
<div>看看我的位置</div>

　　　　理论上说来，最下面的div与上面的div没有关系，因此会自动排到上面的div的下面一行。来看效果：

　　　　


　　　　可以看到，效果不像预期，究其原因，还是上面的父div高度不适应子浮动元素而导致，高度仅仅为边框的高度，从而下面的div自动顶上去了，因此到此错位

　　　　我们来改写上面的代码如下所示：

<div style="border:2px solid #000; width:320px;">
<div style="width:100px;height:100px;float:left; border:1px solid #555555">左浮动元素</div>
<div style="width:100px;height:100px;float:right; border:1px solid #AAAAAA">右浮动元素</div>
<br style="clear:both;" />
</div>
<div>看看我的位置</div>

　　　　上面的代码仅仅添加了一个<br/>元素用于清除浮动，来看最终效果。

　　　　


　　　　看到效果已经正确了。

　　　　但是，如果清除浮动的元素的位置放置不正确会有什么后果呢？再来改写下面的代码：

<div style="border:2px solid #000; width:320px;">
<div style="width:100px;height:100px;float:left; border:1px solid #555555">左浮动元素</div>
<div style="width:100px;height:100px;float:right; border:1px solid #AAAAAA">右浮动元素</div>
</div>
<br style="clear:both;" />    //稍稍调整了一下清除浮动的元素的位置
<div>看看我的位置</div>　　
</body>

　　　　效果如下：

　　　　


　　　　可以看到，虽然下面的div的位置正确了，但是上面的父元素还是没有适应子浮动元素的高度。

　　今天公司的前端发给了我一个清除浮动的解决方法列表，觉得挺好的，有的甚至见都未见过。整理如下：

1. float
　　缺点：层层往上找，没完没了，到了body那，算是个头  float 和 margin:0 auto; 有冲突
2. display:inline-block;
　　缺点：不能设置 margin:0 auto;
3. overflow:hidden;
　　缺点：很多JS交互特效做不了，多出去的部分隐藏了
4. 在父级内，加空DIV：clear:both;
　　缺点：父级不能加padding，否则IE6 IE7不兼容
5. <br clear="all" />
　　缺点：每次都要加这个换行符
6. .clear:after { content: '\20'; clear: both; display: block; }
　　缺点：如果代码多了点，也叫缺点的话……
　　此外，如果父级没有宽，就必须为父级加上：zoom:1;用来解决IE6 IE7下的问题