Html 浮块崩塌

我制作了网格系统，遇到了块的“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>

.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\u cell

有一些内容，则至少有一个符号

1，a，

-工作正常，但如果

.l\u cell

为空，则它将折叠为

宽度：0

，并忽略

css

中的

宽度
，使用其中的
，以实现您想要的内容

例如，


这将div视为包含内容的块

希望这有帮助。
找到了。。。

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

（1） 如果将填充添加到
.l\u单元格
，这将增加框的宽度，并且四个宽度为25%的
.l\u单元格
块将无法容纳在一行中。您可以通过使用
框大小：边框框
来解决此问题，这将强制
.l-cell
将超宽保持在25%，同时还包括20px的右侧填充

（2） “零折叠宽度”效应是由于浮动的性质造成的。由于未指定高度或最小高度，因此任何不包含内容的浮动都将具有零高度，但具有25%的宽度。如果您的示例中有一系列浮动，则浮动的左边缘将尽可能向左定位，直到它们碰到上一个浮动的右边缘。如果浮点数的高度为零，则它没有右边缘，因为它的宽度似乎为零。如果添加一个
min height
值，则所有浮动将按预期定位


.l\u行{
最小宽度：0px；
宽度：100%；
最大宽度：100%；
保证金：2rem自动；
}
.l_行：之前，.l_行：之后{
内容：“；
显示：表格；
}
l_row:之后{
明确：两者皆有；
}
l_细胞{
框大小：边框框；
浮动：左；
右边填充：20px；
宽度：25%；
最小高度：20px；
}
.l_单元：第n个孩子（奇数）{
背景颜色：米色；
}
.l_单元：第n个孩子（偶数）{
背景颜色：浅蓝色；
}
l_行l_单元格：最后一个孩子{
右边填充：0px；
}

x1
x3
hey@user2311920，要垂直重复的行吗？Thanx。我在任何地方都使用边框框。这是我的默认。和从最小高度-大泰克斯/
.col {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    padding-top: 1rem;
    padding-bottom: 1rem;
    min-height: 1px;
}