浮动元素间间隙源于空白字符形成的行内格式化上下文，解决需设父容器font-size:0并重置子元素字号，或创建bfc修复塌陷；图文环绕须控制图片自身margin且设display:block；clear:both仅对紧跟浮动后的块级盒生效。
浮动元素之间出现间隙，本质是空白字符+行内格式化上下文
这不是 margin 或 padding 搞的鬼，而是 HTML 中换行符、空格等空白字符被浏览器解析为 ，在浮动元素间形成不可见的 inline-level 间隙。尤其当父容器是 font-size: 16px 时，这个间隙默认就是 4–8px。
解决方向不是“删空格”，而是切断行内格式化上下文：
- 给父容器设
font-size: 0，再给每个浮动子元素单独设font-size（如font-size: 14px） - 或设
line-height: 0，同样需在子元素中重置line-height - 更彻底：把所有子元素设为
display: block或float: left，消除 inline 元素混排
注意：font-size: 0 对图片、伪元素无影响，但会干掉按钮文字、链接文本——必须显式恢复。
浮动后父容器高度塌陷，导致下方“大空白”
所谓“空白”，其实是父容器高度为 0，后续元素从浮动元素底部开始渲染，视觉上像被顶出一大块。用 clear: both 加在浮动元素后面，只能控制那个元素的位置，不修复塌陷本身。
真正该做的是让父容器创建 BFC：
- 现代首选：
display: flow-root—— 专为此设计，无裁剪副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 支持 - 兼容老浏览器：
overflow: hidden—— 有效但有风险：可能意外裁剪position: absolute子项或阴影 - IE6/7 必须：
*zoom: 1—— 触发 hasLayout，配合伪元素清除才可靠
别给父容器写 clear: both，它不参与浮动流，语法合法但毫无作用。
图文环绕时文字紧贴图片、间距失控
文字环绕的边界，由浮动图片自身的 margin-right（左浮动）或 margin-left（右浮动）决定，不是加在 p 或父容器上。
关键实操点：
-
img必须显式设display: block，否则部分浏览器忽略margin - 避免
margin: 12px这类简写——margin-top/bottom会干扰行高，造成段落错位 - 只写需要的方向：
float: left; margin-right: 16px;即可，margin-bottom可选用于防下一段文字顶上来 - 响应式断点里务必同步重置：
@media (max-width: 768px) { img { float: none; margin-left: 0; margin-right: 0; } }
clear: both 失效？先确认它是否作用在正确对象上
clear: both 不作用于浮动元素自身，也不作用于 flex 容器里的子项，更不作用于 inline 元素。它只对「紧跟浮动元素之后、且处于同一块级格式化上下文中的块级盒」生效。
常见失效场景：
- 目标元素是
display: inline或display: inline-block→ 先改display: block - 目标元素被包裹在
display: flex容器里 → flex 项不响应clear - 中间插了
position: absolute元素 → 它脱离文档流，clear的“紧跟”关系断裂 - 父容器用了
overflow: hidden但没触发 BFC（比如设在子容器上而非直接父级）→ 清除逻辑找不到锚点
最常被忽略的，是误以为 clear 能治塌陷——它不能。塌陷得靠 BFC；环绕结束才轮到 clear 出场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
