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下的问题

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。