浮动导致父容器高度塌陷，需清除浮动影响。2. 常用方法包括：使用::after伪元素清除浮动，兼容性好；通过overflow:hidden触发BFC，但可能裁剪溢出内容；推荐使用display:flow-root创建BFC，无副作用且语义清晰。新项目建议优先采用flow-root方案。
当元素使用了浮动（float）后，可能会导致父容器无法正确包裹子元素，造成布局错乱。这时就需要使用 clear-fix 来清除浮动的影响。下面介绍几种常用的 CSS clear-fix 方法。
什么是浮动带来的问题
如果一个容器内的子元素都设置了 float: left 或 float: right，父容器往往会出现高度塌陷——即父元素的高度无法被子元素撑开，影响后续布局。
方法一：使用伪类 :after 添加 clear
这是最常见且兼容性好的 clear-fix 写法，通过在容器末尾插入一个隐藏的块级元素并清除浮动。
.clearfix::after { content: ""; display: block; clear: both;}
将这个类应用到包含浮动元素的父容器上即可：
立即学习“前端免费学习笔记（深入）”；
左浮右浮方法二：使用 overflow 触发 BFC
给父容器设置 overflow: hidden 或 auto 可以触发块级格式化上下文（BFC），从而包含浮动元素。
.container { overflow: hidden; /* 或 auto */}这种方法简单，但要注意如果子元素有超出容器的内容（如下拉菜单），可能会被裁剪。
方法三：使用现代 CSS 的 flow-root
CSS 新增的 display: flow-root 是更推荐的现代方案，专门用于创建无副作用的 BFC 容器。
.clearfix { display: flow-root;}它不会影响溢出内容，也不需要添加额外的 DOM 元素或伪元素，语义清晰。
基本上就这些。老项目可用伪类 after 方式，新项目建议用 display: flow-root，简洁安全。
以上就是如何用css clear-fix清除浮动的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1024520.html
微信扫一扫 
支付宝扫一扫 
