html图片放大后父元素没有内撑开,子Div浮在父div上,无法撑开浮div

当子元素使用CSS浮动属性`float`后,父级元素无法自适应高度。本文介绍了三种解决方法:1) 设置父级元素固定高度;2) 使用`clear`清除浮动;3) 使用`clearfix`类。通过实例代码和效果截图详细展示了每种方法的实现和应用场景。对于不确定高度的内容,推荐使用`clearfix`来保持父级元素的高度自适应。
摘要由CSDN通过智能技术生成

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法。

dae33b839a072b579ec80b9dd7a553a2.png

最外层的父级DIV不能自适应高度-不能随对象撑开没有高度

当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。

如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍。

1、首先我们先看HTML源代码:

html>

父div不自适应高度实例

.divcss5{ width:500px; border:1px solid #000; padding:10px}

.divcss5-lf{ float:left; width:220px; height:100px; background:#000}

.divcss5-rt{ float:right; width:230px; height:100px; background:#06F}

2、问题效果截图:

18cb53051d74a110328147880002b1e7.png

子对象使用float后,父div不能自适应高度实例截图

方法一:对父级设置固定高度   -   TOP

此方法可用于能确定父级div内子级对象高度。

假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果。

1、完整div+css实例html代码(对父div加高度):

html>

父div不自适应高度实例

.divcss5{width:500px;border:1px solid #000;padding:10px; height:100px}

.divcss5-lf{ float:left; width:220px; height:100px; background:#000}

.divcss5-rt{ float:right; width:230px; height:100px; background:#06F}

2、加高度解决不能撑开子对象使用float效果截图

5fb64c6364bc7670c7e12cd0d5ee4a99.png

对父加高度100px 解决外层父div自适应高度截图

此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度。此方法针对能确定父div内的内容高度情况下使用。

方法二:使用css clear清除浮动   -   TOP

对父级div标签闭合

前加一个clear清除浮动对象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值