CSS知识点：清除浮动

开场白

　　我们平时工作中，很容易遇到浮动效果。一个DIV中嵌套多个DIV，左边显示一个DIV，右边显示一个DIV，外层DIV的高度随着内层内容的高度变化。这就是最基本的浮动效果。下图的百度搜索结果就是一个简单的例子。

 

什么是CSS清除浮动？

　　借用W3C的定义。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。（其实简单理解就是浮动的元素就是木板浮在水面上一样，和水平面不在一个平面上，因此两个平面的布局不会互相影响，但是水平面的岸边还是会限制木板的活动区域的。）

以下是一个简单的例子，trapper容器没有“包住”浮动的元素。

.trapper{
  background-color: gray;
  border: solid 1px black;
  }

.left{
  float: left;
  height:200px;
  width:200px;
  border:solid 1px red;
  }

.right {
  float: right;
  height:200px;
  width:200px;
  border:solid 1px green;
  }

<div class="trapper">
<div class="left"></div>
<div class="right"></div>
</div>

  

清除浮动方法

方法一：带clear属性的空元素(简单，兼容性不错，但是增加了没用的html元素，如果浮动元素后边还有相邻的元素，可以给相邻的元素直接加上clear属性。)

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

.trapper{
  background-color: gray;
  border: solid 1px black;
  }

.left{
  float: left;
  height:200px;
  width:200px;
  border:solid 1px red;
  }

.right {
  float: right;
  height:200px;
  width:200px;
  border:solid 1px green;
  }

<div class="trapper">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>

 

方法二：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

.trapper{

  background-color: gray;
  border: solid 1px black;
  overflow:hidden;
　*zoom:1;
  }

.left{
  float: left;
  height:200px;
  width:200px;
  border:solid 1px red;
  }

.right {
  float: right;
  height:200px;
  width:200px;
  border:solid 1px green;
  }

<div class="trapper">
<div class="left"></div>
<div class="right"></div>
</div>

 

方法三：给浮动的元素的容器添加浮动（将容器和内部内容浮动到同一个平面上，这样影响了布局，整体浮动不推荐）

 

方法四：使用CSS的:after伪元素

结合 :after 伪元素和 IEhack ， IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.trapper{

background-color: gray;
  border: solid 1px black;
  overflow:hidden;
　*zoom:1;
  }

.left{
  float: left;
  height:200px;
  width:200px;
  border:solid 1px red;
  }

.right {
  float: right;
  height:200px;
  width:200px;
  border:solid 1px green;
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

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

<div class="trapper clearfix">
<div class="left"></div>
<div class="right"></div>
</div>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

 推荐使用使用伪元素的方式解决元素浮动问题。

结束语

您有收获吗？

希望我没有浪费您的时间。

谢谢您的耐心阅读。

如有错误或者补充及时更正。