清楚浮动造成的影响

清楚浮动的几种方法~

方法一

html部分

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="clearfix"></div>
<div class="after"></div>
	    

css部分

.left {
  height: 200px;
  width: 300px;
  float: left;
}
.right {
  height: 200px;
  width: 300px;
  float: left;
}
.clearfix {
  clear: both;
}

说明

这样写可以达到清楚浮动的效果，不过上诉办法是在需要清除浮动的地方加个div.clear或者br.clear。

但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div或br。

方法二

html部分

<div class="container clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="after"></div>
	    

css部分(只变动clearfix部分)

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

说明

避免改变html结构。(IE5也能用！)

方法三

html部分同方法二。
css部分(只变动clearfix部分)：

.clearfix {
  overflow: auto;
  height: 1%;
}

别人博客里看到说国外一篇文章里写的，亲测，ok的！（IE5不能用。。。IE7及以上能用。）

方法四

html部分同方法二。
css部分(只变动clearfix部分)：

.clearfix {
  overflow: hidden;
  zoom: 1;
}

这个也是别人提供的！亲测，ok的！(IE5都能用！)