盒子高度塌陷问题
2021/11/10 23:09:49
本文主要是介绍盒子高度塌陷问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
一、什么是盒子高度塌陷
盒子高度塌陷:
二、解决方法
方法1、可以在父元素下面加个 ::after 伪类
方法2、可以直接设定父元素的高度
方法4、可以在子元素的最后面增加
方法5、可以在父元素增加浮动
一、什么是盒子高度塌陷
盒子高度塌陷:
本应在父盒子内部的元素跑到了外部
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
<div class="d1"> <div>子元素内容</div> <div>子元素内容</div> </div>
.d1 div{ float: left; height: 100px; width: 100px; border: 1px solid rgb(29, 28, 28); background-color: skyblue; } .d1{ background-color: slateblue; border: 1px solid green; }
此时的子元素无法撑起父元素的高度
二、解决方法
方法1、可以在父元素下面加个 ::after 伪类
.d1::after{ content: ""; display: block; clear: both; }
此时的父元素的高度就与子元素的高度一致,宽度与页面浏览器保持一致
方法2、可以直接设定父元素的高度
缺点:在后期子元素内的高度若是有改动,可能会对父元素造成影响。并且更改时,对高度也要进行计算。
方法3、给父元素使用"overflow: hidden;"
这时的父元素高度等于子元素的高度,但是可能会造成滚动条的出现,即使滚动条之外的页面并没有内容,但滚动条依旧存在,影响美观。
方法4、可以在子元素的最后面增加<br style="clear: both;">
<div class="d1"> <div>子元素内容</div> <div>子元素内容</div> <br style="clear: both;"> </div>
此时的父元素的高度等于子元素的高度,宽度等于页面浏览器的宽度
方法5、可以在父元素增加浮动
此时的父元素的高度与子元素的高度一致,宽度也是一致
缺点:浮动会使页面布局较为难以掌控
这篇关于盒子高度塌陷问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?