如何将div元素移至页面右侧？div3设置float:right效果异常

你的代码里float: right的思路是对的，但当前布局结构和样式设置导致效果不符合预期，以下是具体调整方案和测试建议：

方案1：调整HTML元素顺序 #

浮动元素需要优先加载才能占据正确的位置，把div3放到div1前面，就能让它正常浮动到右侧：

<div class="div3"></div>
<div class="div1">
  <h1>Welcome!</h1>
</div>
<div class="div2"></div>

CSS保持你原来的写法即可生效。

方案2：改用Flexbox布局（更稳定适配） #

放弃浮动，用现代Flexbox实现侧边栏布局，避免浮动带来的流布局问题：

/* 重置body默认边距，设置整体垂直布局 */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.div1 {
  width: 100%; /* 改为占满页面宽度 */
  height: 75px;
  border: 1px solid blue;
  background-color: blue;
}

/* 用容器包裹侧边栏，设置水平布局 */
.sidebar-wrap {
  display: flex;
  flex: 1; /* 占满页面剩余高度 */
}

.div2 {
  width: 50px;
  border: 1px solid blue;
  background-color: blue;
}

.div3 {
  margin-left: auto; /* 自动推到容器右侧 */
  width: 50px;
  border: 1px solid blue;
  background-color: blue;
}

对应的HTML结构调整：

<div class="div1">
  <h1>Welcome!</h1>
</div>
<div class="sidebar-wrap">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

测试建议 #

• 本地测试：把代码保存成HTML文件，直接用Chrome/Firefox打开，如果正常显示，说明是CodeChef平台的全局样式冲突导致的问题。
• 检查平台样式：用浏览器开发者工具（F12）查看div3的实际样式，看是否有平台自带的CSS（比如body的margin、容器overflow属性）覆盖了你的设置。
• 隔离测试：给你的容器加上!important临时测试（比如float: right !important;），看是否能生效，判断是否是样式优先级问题。

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