Float di google chrome dan microsoft edge

saya menggunakan float untuk menjajarkan 3 buah div (left,center,right). gambar pertama adalah tampilan di Google Chrome . gambar kedua adalah tampilan di Microsoft Edge . float tampil baik di Google Chrome, tapi tidak di Microsoft Edge. di Microosoft Edge div terakhir pindah ke bagian kiri bawah kontainer (gambar kedua)

* body,
p, img {
  margin: 0;
}

.container {
  width: 900px;
  border: 5px solid green;
  padding: 3px;
  margin: auto;
}

.left {
  background-color: blueviolet;
  width: 150px;
  height: 300px;
  line-height: 100px;
  text-align: center;
  float: left;
}

.center {
  width: 600px;
  height: 300px;
  background-color: burlywood;
  float: left;
}

.right {
  width: 150px;
  height: 300px;
  background-color: coral;
  float: left;
}

.clear {
  clear: left;
}

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>