多个宽度相同，高度不同的DIV，左浮后布局有空白

为什么同一排的高度只会以高度高的那个DIV为准
问题相关代码，请勿粘贴截图
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            float: left;
            overflow: hidden;
            width: 50%;
            height: auto;
            background-color: red;
        }
        
        .b {
            float: left;
            overflow: hidden;
            width: 50%;
            height: auto;
            background-color: green;
        }
        
        .c {
            float: left;
            overflow: hidden;
            width: 50%;
            height: auto;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="a">啥第三方</div>
    <div class="b">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    <div class="c">查询不到信访局房管局</div>
</body>
运行结果及报错内容
我的解答思路和尝试过的方法

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            float: left;
            width: 50%;
            line-height: 24px;
            max-height: 24px;
            overflow: visible;
            background-color: red;
        }
        
        .b {
            float: left;
            width: 50%;
            max-height: 24px;
            line-height: 24px;
            overflow: visible;
            background-color: green;
        }
        
        .c {
            float: left;
            width: 50%;
            line-height: 24px;
            max-height: 24px;
            overflow: visible;
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="a">啥第三方</div>
    <div class="b">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    <div class="c">查询不到信访局房管局</div>
</body>

设置line-height保证一行的高度相同，设置max-height规定只有一行高度，overflow设置为visible是全显示，你要是想就显示一行剩下的拖动，那是auto,如果是你设置的hidden,多出的字不会显示

因为你b的高度已经把第一行撑开了，所以导致你现在这样

img

img


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            display: flex;
        }
        .box {
            flex: 1;
        }
        .a {
            background-color: red;
        }
        
        .b {
            background-color: green;
        }
        
        .c {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="wrap">
        <div class="box">
            <div class="a">啥第三方</div>
            <div class="c">查询不到卡卡卡收得到</div>
        </div>
        <div class="box b">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    </div>
</body>