html - float block 崩溃

Question

我制作了网格系统并且我遇到了 block 的“strage”行为例如

HTML:

<div class="l_row">
    <div class="l_cell"></div>
    <div class="l_cell"></div>
    <div class="l_cell"></div>
    <div class="l_cell"></div>
</div>

CSS:

.l_row {
    min-width: 0px;
    width: 100%;
    max-width: 100%;
    margin: 2rem auto;
}
.l_row:before, .l_row:after {
    content: " ";
    display: table;
}
.l_row:after {
    clear: both;
}
.l_cell {
    float: left;
    padding-right: 15px;
    width: 25%;
}
.l_row .l_cell:last-child {
    padding-right: 0px;
}

如果 .l_cell 有一些内容至少有一个符号 1, a,   - 效果很好，但是如果 .l_cell 是空它折叠为 width:0 并忽略 css

中的 width

Answer 1

您的布局可以通过一些小的调整来修复。

(1) 如果给 .l_cell 添加 padding，这会增加框的宽度，四个宽度为 25% 的 .l_cell block 将放不下一个线。您可以通过使用 box-sizing: border-box 来解决这个问题，这将强制 .l-cell 将超宽保持在 25%，同时还包括 20px 的右填充。

(2) “零折叠宽度”效果是由于 float 的性质。由于您没有指定高度或最小高度，任何没有内容的 float 都将具有零高度但具有 25% 的宽度。如果您的示例中有一系列 float ，则 float 的左边缘将尽可能向左定位，直到它们碰到前一个 float 的右边缘。如果 float 高度为零，则它没有右边缘，看起来宽度为零。如果你添加一个 min-height 值，所有的 float 都会按照你的预期定位。

.l_row {
    min-width: 0px;
    width: 100%;
    max-width: 100%;
    margin: 2rem auto;
}
.l_row:before, .l_row:after {
    content: " ";
    display: table;
}
.l_row:after {
    clear: both;
}
.l_cell {
    box-sizing: border-box;
    float: left;
    padding-right: 20px;
    width: 25%;
    min-height: 20px;
}
.l_cell:nth-child(odd) {
    background-color: beige;   
}
.l_cell:nth-child(even) {
    background-color: lightblue;   
}
.l_row .l_cell:last-child {
    padding-right: 0px;
}

<div class="l_row">
    <div class="l_cell">x1</div>
    <div class="l_cell"></div>
    <div class="l_cell">x3</div>
    <div class="l_cell"></div>
</div>