子级用css float浮动 而父级不能自适应高度解决方法

前端开发 作者: 2024-06-14 17:30:01
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法。 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个

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

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

如何解决父div对象自适应高度,方法有三种。

<h3 class="title-b">方法一:对父级设置固定高度 

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

如果我们知道内部div高度100px,那对父级设置为100px看看效果。

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

<h3 class="title-b">方法二:使用css clear清除浮动<a href="http://www.divcss5.com/jiqiao/j612.shtml#top" rel="nofollow"><span style="text-decoration: underline">

对父级闭合

前加一个清除浮动对象。

此方法需要注意是clear:both加的位置,不是对父级直接加clear样式,而是在父级

前加带clear对象盒子。

<h3 class="title-b">方法三:对父级样式加overflow样式

此方法非常简单,也可以作为推荐解决父级不能被撑开自适应高度的方法,可以不增加对象,只需要对父级加一个样式即可。

推荐。此方法为非常简单解决子用float,父div不能自适应高度,不能随父内容多少而自适应高度没有高度。

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_27039.html

本站采用系统自动发货方式,付款后即出现下载入口,如有疑问请咨询在线客服!

售后时间:早10点 - 晚11:30点

咨询售后客服

推荐模板

推荐精华

热门标签