一个块元素可以包含另一个块元素吗？

Posted 2023-03-06

【中文标题】一个块元素可以包含另一个块元素吗？

【英文标题】：Can a block element contain another block element?

【发布时间】：2018-06-17 14:50:54

【问题描述】：

昨天开始玩html，现在我有一个问题。

为什么我不能在彼此内部有两个块元素？

【问题讨论】：

是的，你可以有嵌套的块元素。不过，您可能需要使用浮动或定位来防止它们堆叠。

我认为您可能会将块元素的块元素子元素（良好）与作为内联元素子元素的块元素混淆（可能会呈现良好；但违反标准）。

如果你只是在 html/css 中尝试一些东西，就不会发生任何灾难性的事情——所以试试吧！使用 w3c 验证器validator.w3.org

确保执行您实际执行的操作是有效的

如果块元素是空的，并且没有内容，它们会崩溃，根本不可见..

@MilleGloerfeltTarp - 这会工作，但它不会有效。像 H1 这样的标题元素不能包含 p 元素，因为从语义角度来看它被认为是矛盾的。

【参考方案1】：

是的，一个块元素可以包含另一个块元素。 大多数元素的默认显示值为 block 或 inline。

.parent-div
  display:block;
  background:#000;
  width:100px;
  height:100px;
  overflow: hidden;

.child-div
  display:block;
  width:50px;
  height:50px;
  background:#fff;
  margin-top:25px;
  margin-left:25px;

<div class="parent-div">
<div class="child-div">

</div>
</div>