浮动元素脱离文档流导致父容器高度塌陷，需用clearfix或BFC解决；等宽布局中margin易超100%，应配合box-sizing:border-box；现代开发优先使用flex或grid。
浮动元素脱离文档流导致父容器高度塌陷
当子元素使用 float: left 或 float: right 时，它会脱离正常文档流，父容器无法感知其高度，表现为高度为 0 —— 这是多列布局中最常见的“消失”问题。
典型现象：父容器背景色/边框不显示，后续元素上移覆盖浮动内容，打印或截图时布局错乱。
- 仅靠
width和float无法让父容器自动包裹子列 -
display: inline-block虽可避免塌陷，但会产生额外空白间隙，且对垂直对齐敏感 - 现代方案（如
display: flex）更可靠，但若需兼容 IE8–IE9，仍得处理浮动
clear: both 是最直接的清除方式，但位置很关键
clear: both 的作用是「禁止当前元素的上边界紧贴左侧或右侧浮动元素」，它本身不修复父容器塌陷，而是靠在末尾插入一个「撑开高度」的块级元素来间接解决。
常见错误写法：<div class="clearfix">
<div class="col">A</div>
<div class="col">B</div>
</div>，但没在内部加清除元素。
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}- 必须作用于浮动元素的**直接父容器**，否则无效
- 用
::after伪元素比额外加<div style="clear:both"></div>更干净，避免 DOM 污染 - IE6–7 不支持
::after，需用*zoom: 1触发 hasLayout（如.clearfix { *zoom: 1; }）
float 多列等宽布局中 margin 和 box-sizing 的坑
用 float 实现两栏或三栏等宽布局时，margin 容易让总宽度超 100%，导致最后一列换行。
例如：三个 width: 33.33% 的浮动列，再加 margin-right: 10px，第三列必然掉行。
- 解决方案一：最后一列
margin-right: 0（需额外类名或 :last-child） - 解决方案二：改用
box-sizing: border-box，把 padding/border 算进 width 内，留出 margin 余量 - 不要用
% + px混合单位做列宽，尤其在缩放或高 DPI 屏幕下误差放大
清除浮动不是万能的，复杂嵌套时容易失效
当浮动元素内部还有浮动子元素、或父容器本身也被浮动时，::after 清除可能不生效——因为清除只作用于当前 formatting context，而浮动容器不创建新的 BFC。
此时真正起效的是触发 BFC（Block Formatting Context），比如：
.bfc-parent {
overflow: hidden; /* 或 auto / scroll */
/* 不要设 height，否则会裁剪溢出内容 */
}-
overflow: hidden是最轻量的 BFC 触发方式，兼容性好（IE7+） - 但注意：如果子元素有
position: absolute且超出父容器，也会被裁剪 - 多层浮动嵌套时，每一级浮动父容器都应独立处理清除或 BFC，不能只靠顶层 clearfix
浮动布局的脆弱性在于它本质是“借位排版”，一旦某处尺寸计算偏差、字体渲染差异或 zoom 变化，整行就可能断裂。现在用 display: flex 或 display: grid 替代，才是更可控的选择。
