<display-inside>

语法

有效的 <display-inside> 值

flow

元素使用流式布局（块级和行内布局）来布局其内容。

如果其外部显示类型是 inline，并且它参与块级或行内格式化上下文，则它会生成一个行内框。否则，它会生成一个块容器框。

根据其他属性（例如 position、float 或 overflow）的值，以及它自身是否参与块级或行内格式化上下文，它要么为其内容建立一个新的块格式化上下文（BFC），要么将其内容集成到其父级格式化上下文。

flow-root

该元素生成一个块元素框，该框建立一个新的块格式化上下文，定义格式化根的位置。

table

这些元素的行为类似于 HTML <table> 元素。它定义了一个块级框。

flex

该元素的行为类似于块元素，并根据 flexbox 模型布局其内容。

grid

该元素的行为类似于块元素，并根据 grid 模型布局其内容。

ruby

该元素的行为类似于行内元素，并根据 ruby 格式化模型布局其内容。它的行为类似于相应的 HTML <ruby> 元素。

注意：支持双值语法的浏览器，在只找到内部值时，例如当指定 display: flex 或 display: grid 时，会将其外部值设置为 block。这将导致预期的行为；例如，如果您指定一个元素为 display: grid，您会期望在网格容器上创建的框是一个块级框。

正式语法

<display-inside> = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

示例

在此示例中，父框已给定 display: flow-root，因此建立了一个新的 BFC 并包含浮动项。

HTML

html

<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>

CSS

css

.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

结果

规范

规范
CSS Display Module Level 3 # typedef-display-inside

帮助改进 MDN

了解如何贡献

此页面上次由 MDN 贡献者在 2025年7月14日修改。

在 GitHub 上查看此页面 • 报告此内容存在的问题

语法

正式语法

示例

HTML

CSS

结果

规范

浏览器兼容性

css.properties.display.flow-root

css.properties.display.table

css.properties.display.flex

css.properties.display.grid

css.properties.display.ruby

另见

帮助改进 MDN