CSS清除浮动

1.浮动产生的原因

　　一般来说一个盒子使用了CSS float 浮动属性，导致父级对象盒子不能被撑开，这样浮动就产生了。简单地说，浮动就是因为使用了float属性而产生的

2.浮动产生的负作用

　　（1）背景不能显示

　　　　由于浮动产生，如果对父级设置 background背景属性，而父级不能被撑开，所以导致CSS背景不能显示

　　（2）边框不能撑开

　　　　如果父级设置 CSS border 边框属性，而子元素使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开

　　（3）margin padding 设置值不能正确显示

　　　　由于浮动导致父级子级之间设置了css padding margin值不能正确表达。特别是上下的padding和margin不能正确显示

3.css清除浮动的方法

　　（1）给父级元素单独定义高度

　　　　原理：如果父级元素没有定义高度，父元素的高度完全由子元素撑开时，父级div手动定义height，就解决了父级div无法自动获取高度的问题。

　　　　优点：简单、容易掌握

　　　　缺点：只适合高度固定的布局，要给出精确的高度，如果高度和div不一样时，会产生问题。对于响应式布局会有很大影响

　　（2）在标签结尾处加空div标签 clear：both

　　　　原理：添加一个空div，利用CSS提供的clear：both清除浮动，让父级div能自动获取高度

　　　　优点：简单、代码少

　　　　缺点：如果页面浮动布局多，会增加很多空div，不利于页面的优化　　

　　（3）父级div定义 伪类 ：after 和 zoom

　　　　原理：元素生成伪类的作用和效果，能让父级元素自动获取高度

　　　　优点：浏览器支持好、简单便捷

　　　　缺点：有兼容性问题，不易理解原理

　　（4）父级div定义overflow：hidden

　　　　优点：简单、代码少、浏览器支持好

　　　　缺点：不能喝position配合使用，因为超出的尺寸会被隐藏，不建议使用有可能会影响页面布局