我们在页面布局时,基本上都避免不了使用float,但由此也会引发一些问题,尤其是在容器高度不固定时,此时它的高度完全是由内部的元素撑开的。如果内部元素还是浮动的,那么由于内部的元素脱离了文档流,父容器就不能被撑开了。如果父容器设置的有背景或者边框的话,此时就不能正常显示了,另外,父容器下边的其他容器或内容也会跟着向上“浮”, 占据上面的子容器应该占据的位置。那么,这时就需要清除浮动了。
这里总结的几种的方法主要就是针对类似于上面的问题的,但也不仅限于以上问题。主要有以下几种方法:
1、设置空标签
2、父容器设置display: inline-block
3、父容器设置overflow值auto或hidden
4、clearfix方法
下面就根据一个例子分别看一下吧。
例子:
Html结构是这样的:
代码如下 | 复制代码 |
cols1 cols2 cont1 cont2
|
cont1高度不固定,cols1和cols2浮动,cont2高度固定在cont1下面。
jquery18202469739871539448="8" alt='css中页面布局清除浮动的方法' />
理想效果:
下面就分别用几种方法实现一下:
方法一:设置空标签
我们在容器cont1的最后面添加空标签clear:
代码如下 | 复制代码 |
cols1 cols2 cont1 cont2 |
然后对clear添加css:
代码如下 | 复制代码 |
.clear { clear: both; } |
Ok,这样就行了。
方法二:父容器设置display: inline-block
只需对父容器添加css属性display: inline-block; 就行了
代码如下 | 复制代码 |
.cont1 { ... display: inline-block; ... } |
方法三:父容器设置overflow值auto或hidden
只需对父容器添加属性overflow: auto; 或者 overflow: hidden;
代码如下 | 复制代码 |
.cont1 { ... overflow: auto; /*hidden也可以*/ ... } |
方法四:clearfix方法
此时需要写一个clearfix的类:
代码如下 | 复制代码 |
.clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } |
然后在cont1里面挂载上clearfix类就可以了。
以上就是总结的几种清除浮动的方法,欢迎大家提出更好的解决方法。
摩尔庄园 安卓官方版v2.9.24091002S
摩尔庄园很多小伙伴一定都在小时候玩过,但随着我们年龄的增长淡
梦幻庄园最新版 官方正版v1.0.0
梦幻庄园是一款非常好玩的模拟经营类游戏,玩家在游戏中有一个属
合并梦幻岛免内购版 v2.1.0
合并梦幻岛无限内购版是游戏的破解版本,在该版本中为玩家解锁了
无悔华夏魅族版 2025最新版v3.5.194
无悔华夏魅族版是一款超级好用的模拟经营游戏。在这里玩家们需要
月影别墅官方安装包2025版 安卓版v2.3.24
月影别墅官方安装包2025版是一款匠心独具的乙女向剧情游戏,