常规流示例

让我们看一个简单的例子来解释所有这些

html

Basic document flow

I am a basic block level element. My adjacent block level elements sit on new

lines below me.

By default we span 100% of the width of our parent element, and we are as tall

as our child content. Our total width and height is our content + padding +

border width/height.

We are separated by our margins. Because of margin collapsing, we are

separated by the size of one of our margins, not both.

Inline elements like this one and this one sit on

the same line along with adjacent text nodes, if there is space on the same

line. Overflowing inline elements will

wrap onto a new line if possible (like this one containing text),

or just go on to a new line if not, much like this image will do:

src="https://mdn.github.io/shared-assets/images/examples/long.jpg"

alt="snippet of cloth" />

cssbody {

width: 500px;

margin: 0 auto;

}

p {

background: rgb(255 84 104 / 30%);

border: 2px solid rgb(255 84 104);

padding: 10px;

margin: 10px;

}

span {

background: white;

border: 1px solid black;

}

请注意 HTML 如何以其在源代码中出现的精确顺序显示，块级元素彼此堆叠。

对于页面上的许多元素，常规流将创建您需要的精确布局。但是，对于更复杂的布局，您需要使用 CSS 中可用的一些工具来更改此默认行为。从一个结构良好的 HTML 文档开始非常重要，因为这样您就可以与事物默认的布局方式协同工作，而不是与它作斗争。