float:right导致DIV位置异常，如何阻止CCC占据BBB的空白区域？

你的问题核心是浮动元素脱离了正常文档流，导致后面的CCC区块自动填补了它留下的空白。结合你用的Bootstrap栅格系统，给你两个最简洁的解决方案：

方案一：用Bootstrap栅格规范布局（推荐） #

Bootstrap的row是用来包裹同一行的列元素的，你可以把AAA和BBB放在同一个row里，让它们自然分布在左右两侧，CCC单独放在下一个row，这样就不会出现布局错位：

<div class="row text-left">
  <div class="col-xs-2">
    <h5>AAA</h5>
    <field name="AAA"/>
  </div>
  <!-- 把BBB放在同一个row里，用ml-auto实现右侧对齐（Bootstrap 4+） -->
  <div class="col-xs-2 ml-auto">
    <h5>BBB</h5>
    <field name="BBB" />
  </div>
</div>
<div class="row text-left">
  <div class="col-xs-2">
    <h5>CCC</h5>
    <field name="CCC"/>
  </div>
</div>

这里用ml-auto（margin-left:auto）是Bootstrap推荐的实现右侧对齐的方式，比手动加float:right更符合栅格系统的规范，不会破坏文档流，响应式场景下也更稳定。

方案二：清除浮动（适合不想改结构的场景） #

如果你不想调整现有结构，可以给CCC所在的row添加clear:right样式，强制它不跟随右侧浮动的元素：

<div class="row text-left">
  <div class="col-xs-2">
    <h5>AAA</h5>
    <field name="AAA"/>
  </div>
</div>
<div class="row text-left" style="float: right;">
  <div class="col-xs-2 ">
    <h5>BBB</h5>
    <field name="BBB" />
  </div>
</div>
<!-- 添加clear:right清除右侧浮动，阻止CCC填补空白 -->
<div class="row text-left" style="clear:right;">
  <div class="col-xs-2">
    <h5>CCC</h5>
    <field name="CCC"/>
  </div>
</div>

这个方法能快速解决问题，但因为手动使用了float，在小屏幕的响应式场景下可能出现布局错乱，所以优先推荐方案一。

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