css 除了float:right能使得a、b两个元素展示为b、a的顺序，还有其他样式能实现

除了使用 float: right;，CSS 提供了多种方法来改变元素的布局顺序，从而实现元素的视觉重新排序。以下是几种实现元素 a 和 b 以 b、a 顺序展示的方法：

1. Flexbox ( Flexible Box Layout)
   Flexbox 是一种现代的、灵活的布局模式，可以很容易地改变项目顺序。

   .container {
     display: flex;
     flex-direction: row-reverse; /* 使子元素反向排列 */
   }
   

2. Grid Layout
   CSS Grid 也是一种强大的布局方式，允许你控制行和列以及项目的放置顺序。

   .container {
     display: grid;
     grid-template-columns: auto auto; /* 或其他合适的列设置 */
     grid-auto-flow: column; /* 决定行优先还是列优先填充网格项 */
   }
   .b {
     grid-column: 1; /* 将元素 b 放置在第一列 */
   }
   .a {
     grid-column: 2; /* 将元素 a 放置在第二列 */
   }
   

3. Positioning with order property (Flexbox 或 Grid中适用)
   在使用 Flexbox 或 Grid 布局时，可以利用 order 属性来改变元素的排列顺序。

   Flexbox 示例:

   .a {
     order: 2; /* 默认为0，数值越大越后显示 */
   }
   .b {
     order: 1;
   }
   

   Grid 示例（虽然Grid布局主要通过grid-row和grid-column控制位置，但order也能影响在相同位置情况下的堆叠顺序）：

   .a {
     order: 2;
   }
   .b {
     order: 1;
   }
   

4. Using CSS Columns (适用于文本流或简单块级元素布局)
   如果是处理文本或简单的块级元素流，可以使用多列布局，但这通常不直接用于单个元素的顺序调整。

5. Display: contents
   虽然这个方法本身不直接用于交换元素位置，但在某些特定布局结构调整中，通过让父元素“消失”间接影响子元素的排列，可能有帮助。

每种方法的选择取决于你的具体需求和浏览器兼容性考虑。在现代网页设计中，Flexbox 和 Grid 布局因为其灵活性和对复杂布局的良好支持，成为了首选方案。