使用clearfix或display:flow-root可解决浮动导致的父元素高度塌陷，前者通过伪元素清除浮动，后者触发BFC包含浮动子元素。
浮动元素会导致父元素无法正确包裹子元素，出现父元素高度塌陷的问题。这是因为浮动元素脱离了正常的文档流，父元素“看不到”它的存在。要解决这个问题，可以通过以下几种CSS方法来清除浮动影响，使父元素正常包含浮动子元素。
1. 使用clearfix技巧（推荐）
给父元素添加一个clearfix类，通过伪元素在DOM末尾插入一个隐藏的块级元素并清除浮动。
.clearfix::after { content: ""; display: table; clear: both;}
将这个类应用到包含浮动子元素的父容器上：
左浮动右浮动
2. 设置父元素触发BFC（块格式化上下文）
BFC元素能包含内部的浮动元素，不会发生塌陷。可通过以下任意一种方式触发BFC：
立即学习“前端免费学习笔记（深入）”；
overflow: hidden 或 auto（内容不超出时推荐 hidden） display: flow-root（现代推荐方式，专为创建BFC设计） float: left/right（会改变父元素布局，一般不推荐） position: absolute/fixed（脱离文档流，慎用）
最干净的方法是使用 display: flow-root：
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
.parent { display: flow-root;}
3. 给父元素设置固定高度（不推荐）
虽然可以手动设置 height 属性让父元素有高度，但这样不灵活，内容变化时容易出问题，仅适用于高度固定的场景。
4. 在最后添加清除浮动的元素（传统方法）
在浮动元素末尾添加一个空元素并设置 clear: both：
内容
这种方法破坏了结构与样式的分离，不推荐在现代开发中使用。
基本上就这些常用方法。推荐优先使用 clearfix 或 display: flow-root，它们语义清晰、兼容性好且不影响布局。
以上就是如何通过css避免浮动元素导致父元素塌陷的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1007115.html
微信扫一扫 
支付宝扫一扫 
