Bootstrap container-fluid与浮动元素冲突：Edge/Firefox缩进异常求助

这个问题的根源在于Bootstrap的container-fluid和row组件自带的负margin、padding规则，在Edge和Firefox中会干扰浮动元素的文本环绕逻辑，而Chrome对这种嵌套布局的解析更宽松。我们可以通过调整布局结构，去掉不必要的容器组件，同时保留原本的两列样式，来实现跨浏览器一致的文本环绕效果。

解决方案步骤 #

• 移除container-fluid：它的负margin会破坏浮动元素的布局上下文，导致行元素无法正确环绕浮动logo。
• 用d-flex替代row/col实现两列布局：Flex布局在跨浏览器中表现更一致，同时不会干扰浮动的文本环绕逻辑。
• 给浮动logo容器添加右侧和底部的margin，让文本和logo之间保持合适的间距。

修改后的代码 #

<div class="card-body" style="max-width: 400px">
  <span class="rounded logo-container" style="float:right; max-width: 40%; margin-left: 10px; margin-bottom: 10px;">
    <div style="height: 60px; width: 80px;background: red" alt="Logo"></div>
  </span>
  <p class="mb-1 font-weight-bold">ASDASDASDASD</p>
  
  <!-- 用d-flex实现两列布局，替代row/col -->
  <div class="d-flex mb-2">
    <div style="flex: 0 0 6em;">sadfasdf:</div>
    <div style="flex: 1;">sdfasdf</div>
  </div>
  <div class="d-flex mb-2">
    <div style="flex: 0 0 6em;">safdasdfasdf:</div>
    <div style="flex: 1;">sdfsadfsadfasdf</div>
  </div>
  <div class="d-flex">
    <div style="flex: 0 0 6em;">sadfasdfsa:</div>
    <div style="flex: 1;">afsdafs dfsdfsadsdgdfgfs sdfsadf</div>
  </div>
</div>

改动说明 #

1. 移除container-fluid：这个容器的负margin会让内部的row超出父容器的浮动上下文，导致Edge和Firefox无法正确计算文本环绕的空间。
2. 替换row/col为d-flex：Flex布局的flex: 0 0 6em可以实现原col的固定宽度效果，flex:1让右侧内容自动填充剩余空间，同时不会破坏浮动元素的文本环绕逻辑。
3. 添加margin到logo容器：margin-left和margin-bottom确保文本不会紧贴logo，提升视觉体验。

这样修改后，Chrome、Edge和Firefox都会保持一致的文本环绕效果，同时保留原本的两列布局样式。

内容的提问来源于stack exchange，提问作者Georg