【前端问题】解决浮动元素的父容器塌陷

问题浮动的子元素脱离了文档流父容器无法感知它们的高度高度会坍塌为 0或仅剩边框页脚会错误地跑到浮动元素旁边而不是在容器下方。HTMLdiv classfather div classleft/div div classright/div /div div classfooter/divCSSstyle .father { margin: 50px auto 0; width: 300px; /* height: 100px; */ background-color: pink; } .left { width: 100px; height: 100px; background-color: rgb(245, 158, 172); float: left; } .right { width: 100px; height: 100px; background-color: rgb(243, 133, 151); float: right; } .footer { width: 300px; height: 50px; background-color: rgb(255, 56, 89); margin: 0 auto; } /style解决一在受影响元素上直接清除。当一个元素设置了 clear: both; 后它会移动到所有浮动元素的下方不再与浮动元素并排。这本质上是在说我的左右两侧都不能有浮动元素。.footer { width: 300px; height: 50px; background-color: rgb(255, 56, 89); margin: 0 auto; clear: both; }解决二在容器末尾插入一个伪元素这个伪元素会清除前面的浮动从而撑开父容器的高度。.father::after { content: ; display: table;/* 或 block */ clear: both; }解决三现代的清除浮动 flow-root 。这是 CSS 规范专门为创建新的块格式化上下文Block Formatting Context简称 BFC并清除浮动设计的属性语义清晰无需伪元素。.father { margin: 50px auto 0; width: 300px; /* height: 100px; */ background-color: pink; display: flow-root; }解决四overflow: hidden 能解决浮动父容器塌陷核心原因是它触发了元素的BFC。当元素成为 BFC 后它会包裹住内部的浮动元素从而感知到浮动元素的高度父容器因此不再坍塌。这是 CSS 规范的规定当 overflow 的值不是 visible默认时元素会创建新的 BFC。.father { margin: 50px auto 0; width: 300px; /* height: 100px; */ background-color: pink; overow: hidden; }