<div class="box">
  <span class="rule1">浮动元素1</span>
  <span class="rule2">浮动元素2</span>
</div>

.box {
  background: #00ff90;
  padding: 10px;
  width: 500px;
  height: 150px;
}
.rule1 {
  float: left;
  margin: 0;
  padding: 10px;
  background: #ff6a00;
  width: 300px;
  text-align: center;
}
.rule2 {
  float: right;
  margin: 0;
  padding: 10px;
  background: #ff6a00;
  width: 300px;
  text-align: center;
}