Css 使用内联块断开到新行

最近，我在css

float

容器中遇到了一些布局重叠问题，并开始考虑改用

display:inline block

。到目前为止，一切都很好。。。除了我需要能够添加换行符，就像

clear

对浮动所做的那样。一些示例文本

.ib{
边框：1px实心#333；
显示：内联块；
填充：3倍；
}
.闭塞启动{
边框：1px实心#0cc；
显示：内联块；
填充：3倍；
}

闭塞起动
内联块
内联块
内联块
内联块
闭塞起动
内联块
内联块
内联块
内联块

一个老套的想法是使用pseudo元素添加新行，并使元素

内联

，这样断行将影响

内联块

元素。缺点是您不能像使用

内联块那样设置
内联
元素的样式


.ib{
边框：1px实心#333；
显示：内联块；
填充：3倍；
}
.闭塞启动{
显示：内联；
填充：3倍；
空白：预包装；
}
/*创建打断线*/
.块开始：非（：第一个子项）：之前{
内容：“\A”；
}
/*纠正第一个的位置*/
.块开始：第一个孩子{
左侧填充：0；
}

闭塞起动
内联块
内联块
内联块
内联块
闭塞起动
内联块
内联块
内联块
内联块
内联块
闭塞起动
内联块
内联块
在
中。块开始
选择器只需将
显示：内联块
属性更改为
显示：块
。并更改html
，如下所示

我希望这能奏效


.ib{
边框：1px实心#333；
显示：内联块；
填充：3倍；
}
.闭塞启动{
边框：1px实心#0cc；
显示：块；
填充：3倍；
}

闭塞起动
内联块
内联块
内联块
内联块
闭塞起动
内联块
内联块
内联块
内联块
您所描述的内容听起来像是磨合式布局：

磨合框是一个合并到其后面的块中的框，将其自身插入该块的内联级内容的开头。这对于格式化紧凑的标题、定义和其他类似内容非常有用，其中适当的DOM结构是在以下散文之前有一个标题，但所需的显示是与文本一起排列的内联标题。[1]

然而，浏览器支持目前非常差，并且在某些情况下已经倒退[2]。如果您可以控制标记，那么将每组
.ib
和
.block start
元素包装在一个新的块级别标记中可能是您的最佳选择

[1]

[2] 
chnage display css属性
display:table
我会将每组
内联块
元素包装在一个
块
父元素中。@sean-是的，我可能会依赖它。不过，我希望有一个只使用css的解决方案。您可以尝试：
.block start{margin left:100vw；transform:translate（-100vw）；}
但这会对块本身产生一些副作用，…如果运行代码段，您将看到带有
的元素显示为：block消耗其全部行，其相关元素仅在下一行开始。问题，
\A
的用途是什么？这最接近于复制
清除：对浮动的行为——虽然它不允许对元素进行完全的样式控制，但它非常接近。棒极了！