首页 > 网站前端 > Html/CSS > 解决子级DIV用float浮动时父级DIV无法撑开或自适应高度
2015
03-14

解决子级DIV用float浮动时父级DIV无法撑开或自适应高度

在前端开发中经常会使用到浮动,先来看一个示例代码:

以上代码的显示结果为:

解决子级DIV用float浮动时父级DIV无法撑开或自适应高度 - 第1张  | 扩软博客

虽然你可以设置父级DIV的高度来实现想要的结果,但是万一子级DIV高度不一定呢?比如文章内容或长或短。

下面介绍两种方法让父级DIV自适应子级的高度:

方法一:对父级DIV添加 overflow 属性

效果如下,已经可以正常自适应高度了

解决子级DIV用float浮动时父级DIV无法撑开或自适应高度 - 第2张  | 扩软博客

 方法二:使用 clear 来清除浮动(推荐)

显示效果同上,需要注意的是新的DIV添加的位置。

最后编辑:
作者:
百度ID:“度娘程序员”,博主。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

发表回复

你的邮箱地址不会被公开,垃圾评论将被删除。

有人回复时邮件通知我