浮动产生的原始，由于子元素浮动导致父元素无法撑开，父元素的高度为0，无法正常显示父元素的背景。例如：

html代码

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

css代码

.container{
  width:900px;
  margin:0 auto;
  background:#ccc;
}
.left{
  height:180px;
  width:400px;
  float:left;
}
.right{
  height:180px;
  width:400px;
  float:right;
}

css中清除浮动的方法有三种：
1.给父元素添加固定的高度来清除浮动，例如在例子中container中添加height=50px;这种办法是面对那些固定高度的有效,如下：

.container{
  width:900px;
  height:50px;
  margin:0 auto;
  background:#ccc;
}

2.在reset.css中创建一个清浮动的样式.clearfloat:clear:both，在父元素的结束标签前插入一个div,如下：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfloat"></div>
</div>

3.是在父元素中添加overflow:hidden的样式，这也可以清除浮动，针对高度由子元素内容确定的父元素建议使用这种清浮动的方式，如下：

.container{
  width:900px;
  margin:0 auto;
  background:#ccc;
  overflow:hidden;
}

end

一盏灯， 一片昏黄； 一简书， 一杯淡茶。 守着那一份淡定， 品读属于自己的寂寞。 保持淡定， 才能欣赏到最美丽的风景！ 保持淡定， 人生从此不再寂寞。