Beaver Builder 中 img 的 align 属性无效，因其将图片转为 fl-photo 模块并用 Flex 布局替代传统浮动；实现图文环绕需用文本编辑器模块写内联 float 样式，或用列布局模拟。
Beaver Builder 里 img 标签的 align 属性为什么无效
因为 beaver builder 默认会把用户插入的图片转成模块（fl-photo），绕过原生 html 的 align，直接用 css flex 布局控制位置。你手动加 align="left" 或写 style="float:right" 都会被覆盖或忽略。
常见错误现象：<img src="x.jpg" align="right"> 在 Beaver Builder 编辑器里看起来正常，预览或发布后图片又回到段落中间；或者右对齐后文字不环绕，而是被挤到下一行。
- Beaver Builder 的图片模块默认使用
display: flex+justify-content控制水平位置，不是传统浮动流式布局 - 想让文字环绕图片？必须用「文本编辑器」模块配合「内联样式」，不能依赖图片模块自身设置
- 如果硬要改全局行为，得通过自定义 CSS 覆盖
.fl-photo img的display和float，但会影响所有图片模块，不推荐
在 Beaver Builder 中实现图文环绕的两种可靠方式
真要让文字像传统 HTML 那样“绕着图片走”，只有两个路径走得通：一是用纯文本模块手动写内联样式，二是用 Beaver Builder 自带的「列布局」模拟视觉效果。
- 用「文本编辑器」模块：插入
<p><img src="path.jpg" style="float: left; margin-right: 12px; margin-bottom: 6px;" width="150">这里是环绕的文字……</p>—— 注意必须设width（响应式下建议加max-width: 100%） - 用「列」+「图片」+「文本」模块组合：左列放图片（宽度设为
30%），右列放文字（70%），再给图片模块加「顶部对齐」和「无边距」——适合不想写代码但需要响应式保障的场景 - 别碰「图片模块」里的「对齐方式」下拉菜单：它只控制图片在模块容器内的居中/左/右，不触发文字环绕
text-align 和 float 在 Beaver Builder 中的实际表现差异
很多人以为 text-align: right 能让图片右对齐并让文字环绕，其实它只影响行内元素的**水平对齐基准线**，对块级图片无效；而 float 才是真正触发文字环绕的机制，但它在 Beaver Builder 的模块结构里容易被重置。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
text-align: right作用于父容器（比如p或div），会让其中的img“贴右”，但不会释放空间供文字流入 -
float: left是唯一能触发标准环绕行为的 CSS 属性，但 Beaver Builder 的图片模块默认给img加了display: block，会抵消float效果，所以必须手动删掉或覆盖 - 移动端要注意：
float在小屏上可能让文字挤成窄列甚至换行异常，建议加媒体查询限制：@media (max-width: 768px) { img { float: none; display: block; margin: 0 auto; } }
Beaver Builder 图片模块的「CSS 类」输入框怎么安全加自定义样式
这是最稳妥的干预点。Beaver Builder 允许你在图片模块设置里填一个自定义 class 名（比如 wrap-left），然后在主题自定义 CSS 或子主题 style.css 里写对应规则，既不影响其他模块，又能精确控制。
立即学习“前端免费学习笔记（深入）”；
- 在图片模块「高级」→「CSS 类」里填
wrap-left（不要加点，Beaver Builder 会自动当 class 处理） - 然后在后台「外观 → 自定义 → 额外 CSS」里加：
.wrap-left img { float: left; margin: 0 12px 6px 0; max-width: 250px; } - 千万别在「CSS 类」里直接写样式代码（比如
float:left），那只是 class 名，不是 style 字符串 - 如果用了缓存插件，改完 CSS 要清缓存，否则看不到效果
