一、浮动产生原因 浮动是因为使用了float:left或float:right或两者都有而产生的浮动，导致样式缺失或者不正确显示等问题。 二、浮动产生负作用 1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。 2、边框不能撑开 如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。 3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。 三、css解决浮动，清除浮动方法 以这个左右布局为例：

页面效果： 我们可以看到高度只有60px；这是由于右边彩虹块浮动的原因 方法一：添加新的元素 、应用 clear：both； 在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

方法二:父级div定义 overflow: auto（注意：是父级div也就是这里的 main）

方法三： 使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）

方法四:使用双伪元素清除浮动

我们来看看使用之后的效果 可以明显看到已经有了高度。