当页面中使用 `float` 布局图像时，后续段落可能意外继承浮动流，导致布局错乱；本文介绍通过 `overflow: hidden` 封装浮动内容，使后续块级元素自然“脱离浮动流”，恢复标准文档流布局。
在 CSS 中，float 会使元素脱离正常文档流，其后的兄弟元素（尤其是内联或未明确清除的块级元素）会围绕浮动元素排列——这正是问题中第三段文字仍被“推到右侧”或排版异常的原因。直接对目标段落（如 <p>Hello Everyone!</p>）添加 clear: both 虽然可行，但属于“打补丁式修复”，且不具可维护性；更健壮的做法是隔离浮动上下文。
推荐方案是：将所有需要与浮动图像协同布局的元素（如头像旁的用户名、简介等）包裹在一个容器中，并对该容器设置 overflow: hidden（或 overflow: auto）。该声明会触发容器生成 BFC（Block Formatting Context），而 BFC 具有“包含浮动子元素”的特性——即容器高度会自动扩展以包裹内部浮动元素，同时阻止外部元素侵入其浮动影响范围。
以下是优化后的结构与样式：
<div class="user-profile"> <img src="https://via.placeholder.com/100" alt="My portrait"> <p class="username">@BilalKhan615</p> <p>Getting started with HTML and CSS!</p> </div> <p>Hello Everyone!</p>
.user-profile {
overflow: hidden; /* 关键：创建 BFC，包裹浮动 */
}
.user-profile img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
p.username {
font-weight: bold;
margin: 0; /* 可选：重置默认外边距，提升一致性 */
}✅ 优势说明：
- 语义清晰：.user-profile 明确表达了“头像+信息组”的逻辑关系；
- 无需额外空标签或伪元素，兼容性好（支持 IE7+）；
- 后续 <p>Hello Everyone!</p> 作为独立块级元素，自然位于 .user-profile 下方，完全不受浮动干扰；
- 若未来需响应式调整（如小屏下取消浮动），只需修改 .user-profile img 的 float 属性，不影响整体结构。
⚠️ 注意事项：
- 避免对含 position: absolute 或 transform 的容器滥用 overflow: hidden，可能意外裁剪子元素；
- 在现代开发中，也可考虑用 Flexbox 替代浮动（如 .user-profile { display: flex; align-items: flex-start; }），但本例中 overflow: hidden 是最轻量、向后兼容的最佳实践。
总结：浮动不是用来控制整体布局的工具，而是文本环绕的辅助手段。真正稳健的布局应依托 BFC、Flexbox 或 Grid —— 而 overflow: hidden 是激活 BFC 最简洁可靠的开关之一。
