CSS float属性使用问题：如何调整右浮动按钮与SVG按钮的相对位置

• 你给svg元素添加了clear:right属性，该属性会清除右侧浮动影响，强制元素换到新行再执行右浮动，所以两个元素默认呈现上下排列的效果。
• 右浮动元素的横向排列顺序由HTML结构的先后顺序决定：先出现的右浮动元素会更靠近容器右侧，后出现的同层级右浮动元素如果宽度足够，会排在先出现元素的左侧。

方案1：保留float布局 #

1. 移除svg样式中的clear:right属性
2. 调整HTML结构顺序，将svg标签写在button标签之前

修改后代码示例：

button{ 
  float:right; 
  background-color: #155FCC; 
  padding: 10px 25px; 
  color:white; 
  border-radius:20px; 
  box-shadow: none; 
  border: none; 
} 
svg{ 
  float: right; 
  height:55px; 
  width:55px; 
}

<div class="container">
  <!-- 先写svg，右浮动后会排在最右侧 -->
  <svg>...</svg>
  <!-- 后写button，右浮动后会排在svg左侧 -->
  <button>book repair</button>
</div>

方案2：使用flex布局（更推荐） #

float布局容易产生高度塌陷等后续问题，更推荐使用flex布局实现，不需要调整元素书写顺序，代码更易维护：

.container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px; /* 可自定义两个元素之间的间距 */
}
button{ 
  background-color: #155FCC; 
  padding: 10px 25px; 
  color:white; 
  border-radius:20px; 
  box-shadow: none; 
  border: none; 
} 
svg{ 
  height:55px; 
  width:55px; 
}

<div class="container">
  <button>book repair</button>
  <svg>...</svg>
</div>

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