Float Button to the right inside Flexbox

Question

I have a button inside a DIV which has display: flex in styles.

I am using float: right to align the button to the right inside the DIV but it doesn't.

However if I add some text before the button than the button is aligned to the right.

Why? What am I missing?

div {
  align-items: center;
  bottom: 0;
  border: 1px solid red;
  display: flex;
  height: 60px;
  justify-content: space-between;
  padding: 0 20px;
  position: absolute;
  width: 100%;
} 
    
button {
  float: right;
}

<div>
  <button>Save</button>
 </div>