清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题
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="both">
因为br自带clear属性,所以使用它可以解决浮动。这跟添加空标签一样,多了很多无用标签,也不推荐。
7、after伪类清除
这是最推荐的方法了,如果有用过bootstrap的可以看一下他们也是使用的clearfix类就是用的这个方法。注意此方法IE6、IE7下不兼容。
8、设置overflow: auto
这个跟设置hidden差不多,缺点就是不能自定义高度了。
9、设置display: table
作者:wade3po
链接:https://www.jianshu.com/p/ce0bb8db882f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。