清除浮动的几种方法

2020-04-24 11:50:27 浏览数 (2)

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="both">

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

7、after伪类清除

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

8、设置overflow: auto

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

9、设置display: table

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

0 人点赞