STU网页作业

清除float浮动让外层父级div高度自适应的解决办法

更新时间:2021-12-08   文章分类:网页技术课堂

父级容器DIV盒子高度不能自适应一般是因为子级使用了浮动(float)造成,也就是我们所常常说的产生了浮动。导致最外层的父级DIV不能自适应高度-不能随对象撑开没有高度。如何解决父div对象自适应高度,方法有以下三种:


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

给最外层的父级DIV通过CSS设置一个固定的高度即可,此方法适用于能确定父级div内子级对象高度的情况。缺点就是父级是固定高度,不能随内容高度自适应高度。


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

对父级div标签闭合</div>前加一个clear清除浮动对象。

css中添加.clear{ clear:both} 

父级div标签闭合</div>前加<div class="clear"></div> 

需要注意是clear:both加的位置,不是对父级直接加clear样式,而是在父级</div>前加带clear对象盒子。


方法三:对父级样式加overflow样式

此方法非常简单,推荐使用,可以不增加div盒子对象,只需要对父级加一个overflow:hidden样式即可。

在父级对应的css样式中添加overflow:hidden


清除float浮动

STU网页公众号

STU网页设计(STU-WORKS)专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生网页成品免费下载...

qq code back_top

微信扫码咨询