ясно, как в CSS делает огромный рост для первого ребенка

Question

Я использовал много float и clear, но в этом случае я столкнулся со странной проблемой.это мой HTML-код:

    .tablerow{
        border:1px solid blue;
        padding:0px;}
    
    .tablerow .tablerowcolumn{
        height:30px;
        width:15%;
        margin:0px;
        float:right;
        border:1px solid #565656;   
        background-color:#fff; 
    }

    <div class="tablerow">
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="tablerow">
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div style="clear:both"></div>
    </div>

, но результат отличается от ожидаемого:

Answer 1

Вы код работает , но не совсем так, как ожидалось, поскольку .tablerow s не имеют свойства height, и они пытаются быть как можно меньше.

Итак, если вы добавите высоту (например, 100px), вы получите результат:

    .tablerow{
        border:1px solid blue;
        padding:0px;
        height:100px;
    }
    
    .tablerow .tablerowcolumn{
        height:30px;
        width:15%;
        margin:0px;
        float:right;
        border:1px solid #565656;   
        background-color:#fff; 
    }

    <div class="tablerow">
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="tablerow">
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div class="tablerowcolumn">
        </div>
        <div style="clear:both"></div>
    </div>