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

来源：互联网发布：rpc服务端口编辑：程序博客网时间：2024/06/06 12:21

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

最开始的代码：

<html><head></head><body><div style="border:2px solid #000000;" ><span>hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><input type="submit" value="编辑" style="float:right;"></div></body></html>

结果：

解决方法一：

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

<html><head></head><body><div style="border:2px solid #000000;overflow:auto;" ><span>hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><input type="submit" value="编辑" style="float:right;"></div></body></html>

结果：

解决方法二：

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

<html><head></head><body><div style="border:2px solid #000000;" ><span>hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><input type="submit" value="编辑" style="float:right;"><p>hello</p></div></body></html>

结果

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

0 0