使用 clearfix 或触发 BFC 可解决浮动导致的父元素高度塌陷。1. 添加 .clearfix::after 类清除浮动；2. 使用 display: flow-root 触发 BFC，推荐此法以避免样式干扰。
当子元素使用了浮动（float）后，父元素往往无法正确包裹它们，导致高度塌陷。这是因为浮动元素脱离了文档流。解决这个问题需要清除浮动，让父元素能正常包含浮动子元素。
使用伪类 after 清除浮动
最常用且推荐的方法是通过 CSS 的 ::after 伪元素来清除浮动。
给父容器添加一个包含清除浮动的类，例如 clearfix：
.clearfix::after {
content: “”;
display: block;
clear: both;
height: 0;
visibility: hidden;
}
然后在 HTML 中为需要清除浮动的父元素加上这个类：
立即学习“前端免费学习笔记（深入）”；
这样父元素就能正确计算高度，包裹所有浮动子元素。
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
触发 BFC 来包含浮动
另一种方式是让父元素形成块格式化上下文（BFC），这样它会包含内部的浮动元素。
可以通过以下任一 CSS 属性触发 BFC：
overflow: hiddenoverflow: autodisplay: flow-rootfloat: left/rightposition: absolute/fixed
推荐使用 display: flow-root，因为它专为此设计，不影响其他样式：
.parent {
display: flow-root;
}
额外说明
不建议使用 overflow: hidden 如果子元素有定位超出父容器的需求，否则会被裁剪。而 display: flow-root 是现代浏览器支持的良好方案，兼容性也较好。
基本上就这些方法，用起来简单，关键是理解浮动脱离文档流带来的影响。
以上就是如何用css清除浮动保持父元素高度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1011716.html
微信扫一扫 
支付宝扫一扫 
