css清除浮动的四种方式

当我们在用float的时候经常出现如图的问题。总结了击中css清除浮动的方式

一、给父级元素添加高度height

 父级元素div无法获取到高度，给父级元素定义高度 height ，可解决浮动带来的问题。

优点：容易记忆、代码少、容易掌握。 

缺点：只适合⾼度固定的布局，要给出精确的⾼度，如果⾼度和⽗级 div 不⼀样时，会产⽣问题。对于响应式布局会有很⼤影响。

二、父级元素div定义 overflow:hidden

添加之后，⽗元素会去适配所有⼦元素,即使脱离⽂档流的⼦元素,适配之后,⽗元素就有了⾼度

优点：容易记忆、代码少、浏览器⽀持好

缺点： 不能和 position 配合使⽤，因为超出的尺⼨的会被隐藏。

三、在子类标签结尾处前加空 div 标签，添加清除样式clear:both

添加⼀个空div在父级元素前，利⽤ css 提供的 clear:both 清除浮动，让⽗级div能⾃动获取到⾼度。

优点：容易记忆、代码少、浏览器⽀持好 

缺点：不理解原理；若⻚⾯浮动布局多，就要增加很多空div，不利于⻚⾯优化。

四、⽗级div定义伪元素:after和zoom

给⽗级div添加一个选择器clearfloat，用:after和zoom来实现清除浮动。

代码如下：

元素⽣成伪类的作⽤和效果相当于三中的原理，但是IE8以上和⾮IE 浏览器才⽀持。

after，zoom(IE 专有属性)可解决 ie6,ie7 浮动问题。 

优点：浏览器⽀持好、不容易出现怪问题，写法是固定的，不理解也可直接复制使⽤；

（推荐此种⽅法，简单便捷，只需添加⼀个 class 可解决问题） 

缺点：css 代码多、原理不够理解，要两句代码结合使⽤才能让主流浏览器都⽀持。