热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html浮动溢出,HTML中float浮动溢出父级元素的处理方法

今天偶然又用到float控制元素位置,可是定义float属性就不在父级元素内部,调了很久发现自己傻逼了,我也只试过两个解决方法࿰

今天偶然又用到float控制元素位置,可是定义float属性就不在父级元素内部,调了很久发现自己傻逼了,我也只试过两个解决方法,如下:

最开始的代码:

hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

结果:

0818b9ca8b590ca3270a3433284dd417.png

解决方法一:

在父级块的元素样式中添加 overflow:auto

hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

结果:

0818b9ca8b590ca3270a3433284dd417.png

解决方法二:

在float的元素后面加一个别的标签,但是如果隐藏标签的话还是会浮动出去。。。

hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

hello

结果

0818b9ca8b590ca3270a3433284dd417.png

虽然这些都治标不治本,float属性允许你将普通元素流中的元素在它的包含元素内尽可能地向左或向右排列。可是还是溢出了。。









推荐阅读
author-avatar
Mua--于毛毛在路上
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有