css 清除浮动

什么是浮动？

原理： 在css中使用float:left和float:right,使元素脱离文档流。同时显示为类似display:inline-block的形式（可以定义宽高，但是又不会换行）。最大的好处就是相比与之前的table布局，更具有灵活性。

不清除浮动会产生什么后果？

后果：父元素高度塌陷（子元素浮动之后，没有元素去撑开父元素）

清除浮动的方法有哪些？

1. 父级元素定高度

 
    
Left
 
    
Right
 

div2

.div1{
  background:#000080;
  border:1px solid red;
  height:40px;
   }
.div2{
  background:#800080;
  border:1px solid red;
  height:100px;
  margin-top:10px
  }
.left{
  float:left;
  width:20%;
  height:40px;
  background:#DDD
  }
.right{
  float:left;
  width:30%;
  display:inline;
  margin-left:12px;
  height:40px;
  background:#DDD
  }

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一致时，会产生问题。
建议： 定高布局时可以考虑

2.添加额外的标签

 
    
Left
 
    
Right
 
    


div2

.div1{
  background:#000080;
  border:1px solid red;
  }
.div2{
  background:#800080;
  border:1px solid red;
  height:100px;margin-top:10px}
.left{
  float:left;
  width:20%;
  height:40px;
  background:#DDD
  }
.right{
  float:left;
  width:30%;
  margin-left:12px;
  display:inline;
  height:40px;
  background:#DDD
  }
.clearfloat{
  clear:both
  }

原理：在父元素底部添加一个空的div子元素，利用css提供的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单、代码少，浏览器支持好，不容易出现怪问题。
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空的div，代码语义化变差。
建议： 不推荐使用，但此方法是以前主要使用的一种清除浮动的方法

3.父元素设置overflow：hidden（触发BFC）
通过设置父元素overflow：hidden；在IE6中还需要触发hasLayout，例如：zoom：1；

 
    
Left
 
    
Right
 

div2

.div1{
  background:#000080;
  border:1px solid red;
  overflow:hidden;
  zoom:1
  }
.div2{
  background:#800080;
  border:1px solid red;
  height:100px;
  margin-top:10px
  }
.left{
  float:left;
  width:20%;
  height:40px;
  background:#DDD
  }
.right{
  float:left;
  width:30%;
  margin-left:12px;
  display:inline;
  height:40px;
  background:#DDD
  }

优点：不存在结构和语义化问题，代码量极少。
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的内容。

4. 父元素设置overflow: auto;
   代码如上
   优点：不存在结构和语义化问题，代码量少。
   缺点：多个嵌套后，Firefox某些情况会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块有滚动条，Firefox早期版本会无骨产生focus等。

5. 父元素也浮动

 
    
Left
 
    
Right
 

div2

.div1{
  background:#000080;
  border:1px solid red;
  width:100%;
  float:left
  }
.div2{
  background:#800080;
  border:1px solid red;
  height:100px;
  margin-top:10px
  }
.left{
  float:left;
  width:20%;
  height:40px;
  background:#DDD
  }
.right{
  float:left;
  width:30%;
  margin-left:12px;
  display:inline;
  height:40px;
  background:#DDD
  }

优点不存在结构和语义化问题，代码量极少。
缺点：父元素还有父元素，不可能一直浮动到body，不推荐使用。

6.父元素设置display： table

 
    
Left
 
    
Right
 

div2

.div1{
  background:#000080;
  border:1px solid red;
  width:100%;
  display:table;
  }
.div2{
  background:#800080;
  border:1px solid red;
  height:100px;
  margin-top:10px
  }
.left{
  float:left;
  width:20%;
  height:40px;
  background:#DDD
  }
.right{
  float:left;
  width:30%;
  margin-left:12px;
  display:inline;
  height:40px;
  background:#DDD
  }

原理：将div属性变成表格。
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，不推荐使用。
建议：了解即可。

7. 使用：after伪元素

 
    
Left
 
    
Right
 

div2

.div1{
  background:#000080;
  border:1px solid red;
  }
.div2{
  background:#800080;
  border:1px solid red;
  height:100px;
  margin-top:10px
  }
.left{
  float:left;
  width:20%;
  height:200px;
  background:#DDD
  }
.right{
  float:left;
  width:30%;
  margin-left:12px;
  display:inline;
  height:80px;
  background:#DDD
  }  
.clearfloat:after{ 
  display:block;
  clear:both;
  content:"";
  visibility:hidden;
  height:0
  }
.clearfloat{
  zoom:1
  }

优点： 结构和语义化完全正确。
缺点：复用方式不当会造成代码量增加。

清除浮动的原理不外乎两条：要么触发BFC要么使用clear属性。