CSS-定位5-清楚浮动

1、CSS浮动产生原因

一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。

2、CSS浮动影响

1、背景不能显示
  由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
  如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
  由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

3、清除浮动影响的方法

（1）使用clear属性

运行效果：

清楚浮动前

使用clear:both 清楚浮动

运行效果：

清楚浮动后

（2）使父元素BFC
  给父wrap元素添加 overflow:hidden属性，使其产生BFC。运行效果与clear:both 效果相同。