清除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

您对 作品 进行了编码，但并非完全符合预期，因为.tablerow没有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>