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

今天偶然又用到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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值