浮动导致父容器高度塌陷，使边框无法包裹内容；应通过 display: flow-root 或伪元素清除法触发bfc来解决，而非依赖 clear 或 overflow。
float 嵌套时子元素边框不显示或错位
直接原因：浮动元素脱离文档流，父容器高度塌陷，导致 border 画在“看不见的高度”上。不是边框没生效，是它包不住内容。
- 检查父容器是否设置了
height或min-height—— 临时加个值能验证是不是塌陷问题 - 别用
overflow: hidden硬撑高，它会裁掉溢出的边框和阴影，尤其在有transform或position: absolute子元素时更危险 - 真正安全的做法是触发 BFC，比如给父容器加
display: flow-root（现代浏览器支持良好，IE 不支持）
clear 该加在谁身上：父容器还是兄弟元素
clear 的作用对象永远是「当前元素自身」，不是它里面的子元素。很多人把 clear: both 加在浮动子项末尾，以为能“清空内部”，其实只是让那个子项自己下移，对父容器高度毫无帮助。
- 需要清除的是「浮动造成的布局干扰」，典型场景是浮动列表后紧跟一个段落，段落文字跑进浮动区——这时
clear要加在段落上，而不是列表里 - 如果目标是让父容器包裹住所有浮动子项，请放弃在子项上加
clear，改用display: flow-root或伪元素清除法：::after { content: ""; display: table; clear: both; } - 用
clear: left/right时务必确认浮动方向一致，clear: right对float: left的元素完全无效
border 在 float + margin 混用时出现像素级错位
浮动元素的外边距（margin）在某些情况下会与相邻块级元素发生折叠，但又不完全遵循标准块级折叠规则，导致边框位置偏移 1px，尤其在缩放或高清屏下明显。
- 避免对浮动元素同时设置
margin和border，优先用padding模拟间距，再用border包裹整个区域 - 若必须用
margin，统一使用margin-right或margin-left，不要混用上下左右；横向浮动时，上下margin实际不会影响布局流 - Chrome 100+ 对
float元素的box-sizing解析更严格，确保设为box-sizing: border-box，否则width + padding + border可能超限
IE8–11 下 flow-root 不可用怎么办
display: flow-root 在 IE 完全不识别，降级方案必须手动触发 BFC，且不能依赖 overflow 带来的副作用。
- 最稳妥的兼容写法是伪元素清除：
.container::after { content: ""; display: table; clear: both; }，注意父容器需有zoom: 1触发 hasLayout（仅 IE6–7） - 慎用
overflow: auto：它会在内容超宽时强制出现滚动条，破坏设计预期；overflow: hidden则可能吞掉box-shadow或position: absolute的定位参考 - 如果嵌套层级深（比如浮动 inside 浮动 inside flex），清除必须落在每一级浮动父容器上，漏一级就塌陷一级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
