清除浮动的几种方法

Css对于浮动的定义：使元素脱离了文档流，按照指定方向移动，直到碰到包含框或另一个浮动框为止。

本人现在虽然已经不用浮动了，都用弹性布局flex，但是不可否认，浮动是在弹性布局出现之前使用最多的。而清除浮动有哪些方法，哪些方法又是推荐的。

1、overflow: hidden

子元素浮动了，那么给父元素设置属性overflow: hidden，浮动就清除了，这个方法唯一的缺点就是超出父元素的会被隐藏。

2、增加额外标签，然后添加属性clear: both

在这个使用了浮动之后增加一个标签，这个标签添加属性clear: both，而且这个标签还需要是块或者是行标签，span和a等标签也无效。这种方法会给页面增加很多无用的标签，但是如果你一个div之后又是一个div，然后内容是写在下一个div里面，那么给这个div添加还是可行的。

3、给父元素添加高度

我们都知道浮动之后造成了高度塌陷，那么我们只要给父元素添加了高度，就可以解决浮动问题。缺点也很明显，那就是父元素高度必须固定了。

4、给所有元素添加浮动

浮动的元素碰到另一个浮动的元素就会停止，那么给所有元素添加浮动也可以解决问题。但是这方法实在是太弱智了，一般不会有人用吧。

5、使用display: inline-block

给父元素设置这个属性，浮动可以解决，唯一缺点就是margin: 0 auto失效了。

6、使用

因为br自带clear属性，所以使用它可以解决浮动。这跟添加空标签一样，多了很多无用标签，也不推荐。

7、after伪类清除

这是最推荐的方法了，如果有用过bootstrap的可以看一下他们也是使用的clearfix类就是用的这个方法。注意此方法IE6、IE7下不兼容。

8、设置overflow: auto

这个跟设置hidden差不多，缺点就是不能自定义高度了。

9、设置display: table

我是觉得跟flex有点类似了，不推荐使用，因为不知道会不会有其他问题。

欢迎关注Coding个人笔记 公众号

转载于:https://juejin.im/post/5c48418a6fb9a049fe357dda