<!DOCTYPE html>
<style>
.container {
  overflow: hidden;
  width: 40px;
  height: 40px;
  background: red;
}
#floatBox {
  display: none;
  width: 40px;
  height: 20px;
  background: green;
}
.sibling {
  margin-top: 20px;
  width: 40px;
  height: 20px;
  background: green;
}
</style>
<div>There should be a green square below, and no red.</div>
<div class=container>
    <span>
        <div id=floatBox></div><div class=sibling></div>
    </span>
</div>
<script>
document.body.offsetTop;
floatBox.style.display = "block";
floatBox.style.float = "left";
</script>