Why do the elements of float layout wrap and how to solve the problem

as shown in the figure:

the code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .main{
            width:740px;
            margin:0 auto;
            position: relative;
            background:lightsalmon;
            height:800px;
        }
        .wrap{
            position: absolute;
            left: 50%;
            bottom: 4px;
            color: -sharp9DA2AD;
            z-index: 3;
            padding: 0px 16px;
            height: 24px;
            border-radius: 16px;
            background: lightblue;
            transform:translateX(-50%);
        }
        .wrap div{
            line-height: 24px;
            float:left;
        }
    </style>
</head>
<body>

<div class="main">
    <div class="wrap">
        <div class="left1">sample text</div>
        <div class="left2">left2 content left2</div>
        <div class="left31">left31 left31 left31 left31 left31 </div>
        <div class="left32">left32</div>
        <div class="left">left33</div>
        <div class="left4">left4 content</div>
    </div>
</div>

</body>
</html>

Horizontal-centered float css

Mar.17,2022

.wrap , left is 50%, so the width is only 50%, that is, 370px, and then remove the left and right padding , and there is still 338px left. No wonder you can't wrap.

is your
ide4104" alt="" title="">

is not wide enough.

Previous: Vue + element-ui table (table) component, how to achieve later users input a column of data, and then sum the sum of the previous column

Next: Before beforeEach mounts the instance again, router.js is invalid and cannot be redirected to other pages.