什么是导致宽度的块在新行上的规范

Question

我不确定我是否理解这方面的内容display: block.

如果我有两个后续块元素,其设置宽度为元素留出足够的空间,使它们可以并排,看起来它们应该是并排的.但事情并非如此.

body {
	padding: 0;
	margin: 0;
}
div {
	height: 100px;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
	display: block;
}
.left {
	background-color: blue;
}
.right {
	background-color: red;
}
.half {
	width: 30%;
}

<div class="half left"></div><div class="half right"></div>

根据我的理解,css布局模块中没有概念作为"线",因此没有任何东西(正如w3schools所说的那样)"所有块都在新线上开始".

那么描述这种行为的规范究竟是什么呢？

注意:我知道有很多方法可以并排放置,从inline-block,到float,到flexbox,我正在寻找一个专门描述规范行为的答案.

Answer 1

CSS2.1的9.4.1节:

在块格式化上下文中,框从一个包含块的顶部开始一个接一个地垂直排列.

实际上这就是它的全部内容.确切地说,参与块格式化上下文的框是该上下文中正常流中的块级框.这包括块方框(display: block)和任何其他块级框,例如display: table和display: flex(即不是inline-*对应框),除了那些在从流中取出时浮动或绝对定位的框.

"行"的概念主要仅适用于内联格式化上下文,这将在下一节中介绍.你是对的,因为块布局本身没有"线"的概念.