文字环绕效果不该用于两栏自适应布局，因浮动本职是图文混排而非结构布局；float:left会使元素脱离文档流导致父容器塌陷，右侧仅靠margin-left易错位，且无法等高、响应式差、裁剪绝对定位元素；现代应优先用flex或grid实现布局，文字环绕仅限图片等行内级内容。
文字环绕效果不该用在两栏自适应布局里——它和布局是两套逻辑，混用必然出问题。浮动的本职是图文混排，不是做容器级结构。
float:left 为什么不能直接用于两栏自适应布局
设置 float:left 后，元素会脱离文档流，但父容器仍按“没这回事”计算高度，导致塌陷；右侧内容若只靠 margin-left 撑开，一旦左侧宽度变化或响应式断点切换，就会错位、重叠甚至消失。
- 文字环绕依赖的是「行框（line box）」参与计算，而两栏布局需要的是「块级容器高度可控、子项可对齐、响应可预测」
-
float元素无法触发等高（如左栏背景色无法拉满到右栏底部） - 清除浮动的方案（如
overflow:hidden）会意外裁剪position: absolute子元素、下拉菜单、tooltip 等真实业务组件 - 现代浏览器中，
float在 flex/grid 容器内完全失效，且 CSS 规范已明确将其定位为“图文环绕工具”而非布局机制
真正该用的文字环绕写法（仅限图文场景）
如果你确实要实现“图片+旁边绕排文字”，就老老实实按浮动原始语义来写，别塞进布局容器里：
- 图片本身设
float:left或float:right，加margin预留间隙 - 文字用普通
<p></p>或<div>，不设任何浮动、不设 width、不包进“layout wrapper” <li>避免给图文外层加 <code>overflow:hidden或display:flow-root—— 这会切断行框上下文，让环绕失效 - 长段落中若需强制换行避让，可用
clear:both插入空<div>，但它必须是 <strong>段落内的兄弟节点</strong>，不是布局容器的子节点 <p>示例：</p> <pre class="brush:php;toolbar:false;"><div class="article"> @@##@@ <p>这是一段很长的文字……会自然绕排在图片右侧和下方。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5030" title="Html To Pdf"><img src="https://img.php.cn/upload/skill/000/000/081/179031962213835.jpg" alt="Html To Pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5030" title="Html To Pdf" class="overflowclass">Html To Pdf</a> <p class="overflowclass">使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。</p> </div> <a rel="nofollow" href="/xiazai/skill5030" title="Html To Pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div style="clear:both"></div> <p>这一段从新行开始，不再绕图。</p> </div></pre> <h3>两栏自适应布局该用什么替代 float</h3> <p>现代项目中，<code>float不是“兼容旧浏览器的备选”，而是“协作成本高、维护风险大”的信号。正确选择取决于你的兼容要求：- 需支持 IE10+：用
display:flex，父容器display:flex，左栏flex: 0 0 240px，右栏flex: 1 - 只支持 Chrome 57+/Firefox 52+/Safari 10.1+：用
display:grid，父容器grid-template-columns: 240px 1fr - 必须兼容 IE6–9（极少数遗留系统）：才考虑
float + overflow:hidden，但务必加*zoom: 1保 IE6/7，且接受所有副作用
注意：
flex和grid下，文字环绕必须回归原始语义——即只作用于图片、图标等行内级内容，绝不可把<main></main>或<aside></aside>当成“绕排对象”。容易被忽略的排版细节
很多人以为解决了“能显示”，就等于完成了排版。实际线上最容易崩的是这些：
- 右栏含长英文/URL 无空格时，
flex: 1容器默认不换行，要加overflow-wrap: break-word或word-break: break-word - 小屏切列布局时，
flex-direction: column必须作用在父容器上，而不是分别控制左右栏的display -
align-items: stretch是等高的默认行为，但某些 CSS 重置库（如 normalize.css 的变种）会覆盖它，得显式检查 - 如果右栏用了
position: absolute，它会脱离 flex 布局上下文，高度不再参与父容器计算——这种写法本质已放弃语义化排版
真正的难点从来不在“怎么写出来”，而在于判断：这个区域到底该是图文关系，还是结构关系？选错一层，后面十层都得重写。
- 需支持 IE10+：用
