html - 清除两个在 css 中的第一个 child 的高度

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 没有 height 属性，他们正试图尽可能少。

因此，如果您添加一个高度(例如 100 像素)，您将得到以下结果:

    .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>