--- title: CSS 流式布局 slug: Web/CSS/CSS_Flow_Layout translation_of: Web/CSS/CSS_Flow_Layout --- <div>{{CSSRef}}</div> <div>"文档流"或"流式布局"是在对布局进行任何更改之前,在页面上显示"块"和"内联"元素的方式。 这个"流"本质上是一系列的事物,它们都在你的布局中一起工作,并且互相了解。 一旦某部分脱离了"流",它就会独立地工作。</div> <div> </div> <div>在文档流中,内联元素按内联方向显示,即词语在依据文件写作模式的句子中表示的方向。块元素则一个接一个地显示,就像该文档的写作模式中的段落一样。 因此在英语中,内联元素从左边开始一个接一个地显示,块元素从顶部开始向下显示并移动页面。</div> <h2 id="示例">示例</h2> <p>下面的示例演示块和内联级别框。两个带有绿色边框的段落元素是"块"级,其中一个在另一个下面显示。</p> <p>第一个句子还包括一个带有蓝色背景的 span 元素。 这是行内级别,因此显示在句子的适当位置。</p> <p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p> <h2 id="参见">参见</h2> <ul> <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li> <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li> <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li> <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li> <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li> </ul> <h2 id="参考">参考</h2> <h3 id="Glossary_Entries">Glossary Entries</h3> <ul> <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> </ul> <section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> </ol> </section>