css清除浮动之常用的5种方法

css关于清除浮动

本文参考了博客http://www.jb51.net/css/173023.html后经过本人的实践总结除了下面几种清除浮动的最常用的方法。

 .div1 {
        background-color: #00c;
      }
 .left {
        float:left;
        width: 200px;
        height:200px;
        background-color: #0c0;
      }
 .right {
        float:right;
        width: 200px;
        height:200px;
        background-color: #0f0;
      }
.div2 {
        height:100px;
        background-color: #ffc;
      }

<div class="div1">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="div2">div2</div>

 

 

首先要说说浮动：如上所示代码，div1里有两个小的div，这两个div分别设置左浮动和右浮动，这样显示出来肯定会对下一个div块造成影响。

然后说明浮动带来的问题：

• 1.会使当前标签产生上浮效果，影响前后标签，父级标签的位置。

• 2.浮动存在浏览器兼容等问题

• 浮动的元素脱离标准流，让出标准流位置，浮动的元素依次贴边，浮动的元素没有margin塌陷，字围现象
  

要清除div1里浮动的影响，有常用的5种方法：

• 1.推荐使用的方法：父级div1定义 伪类：after和zoom: 给div1加个clearfloat的类，（父级div不能设高度）。

  .clearfloat:after {
               display:block;
               clear:both;
               content:"";
               visibility:hidden;
               height:0
               } 
  .clearfloat { zoom:1} 
  

• 
  2.给父级div1定义 height：就是给div1块加个height: 200px; . 注意，height高度的值要大于div1里子元素的任何一个高度。所以这种方法的缺点就是：只适合高度固定的布局，要给出精确的高度。 
  
  

• 3.结尾处加空div标签 clear:both：在right块的下面加个空div：<div class="clearfloat"></div>，并且要设置.clearfloat {clear:both}。缺点就是如果页面浮动布局多，就要增加很多空的div，对页面不友好。 
  
  
• 4.父级div定义 overflow: hidden：需要对div1定义一个width或zoom:1,同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 。缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 
  
  
• 5.父级div定义 overflow:auto ：同上，需要对div1定义一个width或zoom:1,同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 。缺点：内部宽高超过父级div时，会出现滚动条。