css 清除浮动的方法

标签：原理   一个   round   使用   意义   htm   增加   设置   width   

不添加清除浮动的时候：这里我没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：
（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
<style>
  .outer {
    border: 1px solid red;
    width: 400px;
  }
  .inner{
    width:50px;
    height:50px;
    background-color:green;
    margin-right:20px;
    float:left;
  }
  .footer{
    width:400px;
    height:100px;
    background-color: purple;
  }
</style>

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>
<div class="footer"></div>

清除浮动方法1：添加新的元素，给他的css 添加clear:both  

　在浮动元素的父级内部所有浮动元素的后面一个空标签，给他的样式写clear:both;
　　弊端：添加了新的无意义的标签

.claer{clear:both;height:0;line-height:0;font-size:0}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
　<div class="clear"></div>

</div>

方法二：父级div定义 overflow: auto或者hidden（注意：是父级div也就是这里的  div.outer）

　　此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。

　　不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

.over-flow{
  overflow: hidden;
　　zoom:1  //用于兼容IE6
}<div class="outer over-flow">

  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <!--<div class="clear"></div>-->
</div>
<div class="footer"></div>

方法三： 据说是最高大上的方法  :after 方法：（注意：作用于浮动元素的父亲）

　　　先说原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法： 　　

.outer{
  zoom:1 /* // 兼容IE6/7  */
}
.outer:after{
  clear:both;
  content:‘.‘;
  display:block;
  width:0;
  height:0;
 visibility:hidden;  /*允许浏览器渲染他，但是不显示出来*/
}
其中clear:both;指清除所有浮动；content: ‘.‘; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

css 清除浮动的方法

标签：原理   一个   round   使用   意义   htm   增加   设置   width   

原文地址：http://www.cnblogs.com/jin7754/p/7410949.html