当页面中使用 `float` 布局图像时，后续段落可能意外继承浮动行为；通过为浮动内容包裹一个具有 `overflow: hidden` 的容器（即“bfc 触发器”），可有效清除浮动影响，使后续段落恢复标准文档流。
在 CSS 布局中，float 会使元素脱离正常文档流，导致其后的块级元素（如 <p>）围绕它排布——这正是你遇到的问题：前两段文字紧贴左浮动头像排列，而第三段本应独占一行，却仍受浮动影响“被挤偏”。
最简洁可靠的解决方案是创建一个新的块级格式化上下文（BFC），将所有需与浮动共存的元素封装在一个容器内。现代推荐做法是给该容器设置 overflow: hidden（或 overflow: auto、display: flow-root）：
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
p.username {
font-weight: bold;
}
/* 创建 BFC，包裹浮动及其相邻内联内容 */
.overflow-hidden {
overflow: hidden; /* 关键：触发 BFC，自动包含浮动子元素 */
}对应 HTML 结构如下：
<div class="overflow-hidden"> <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> <!-- 此段完全脱离浮动影响，正常独占一行 -->
✅ 为什么有效？
overflow: hidden 会强制浏览器为该 <div> 创建独立的 BFC，使其内部浮动元素不再影响外部布局，且容器自身会自动扩展以包裹所有浮动子元素（即“清除浮动”效果）。
⚠️ 注意事项：
- 避免滥用 clear: both 直接加在 <p> 上——虽能临时解决，但语义不清且破坏结构可维护性；
- display: flow-root 是更现代、语义更明确的替代方案（兼容性：Chrome 64+/Firefox 58+/Safari 15.4+），可直接替换 overflow: hidden；
- 不要依赖 float 实现图文混排以外的复杂布局，建议在新项目中优先使用 Flexbox 或 Grid。
总结：用 overflow: hidden（或 display: flow-root）包裹浮动及其邻近内容，是最轻量、可靠且符合现代 CSS 实践的清除浮动方式。
