在css中清楚地为第一个孩子创造了一个巨大的高度

Question

我使用了很多浮动和清晰，但在这种情况下我遇到了一个奇怪的问题。这是我的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

您的代码有效，但不完全符合预期，因为.tablerows没有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>