三个div并排在一起，但它们之间没有自动边距

<style>
    .div1, .div2, .div3 {
        float: left;
        width: 33.33%;
        height: 100px;
    }
</style>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

<style>
    .container {
        display: flex;
    }
    .div1, .div2, .div3 {
        flex: 1;
        height: 100px;
    }
</style>

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 0;
    }
    .div1, .div2, .div3 {
        height: 100px;
    }
</style>

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>